写点什么

Vue 基础知识整理【建议收藏】

作者:何极光
  • 2022-11-01
    陕西
  • 本文字数:5420 字

    阅读完需:约 18 分钟

Vue基础知识整理【建议收藏】

一、Vue 是什么

  • Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

  • Vue 只关注视图层, 采用自底向上增量开发的设计。

  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、Vue 的安装

1. 独立版本

在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

2. 使用 CDN 方法

三、Vue 起步

每个 Vue 应用都需要通过实例化 Vue 来实现,语法格式如下:


var vm = new Vue({  // 选项})
复制代码


以下为 Vue 实例,我们主要关注其构造器中的内容:


<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>    <body>        <div id="app">            <p>{{message}}</p>            <a href="#">{{details()}}</a>        </div>        <script type="text/javascript">            // 创建一个 Vue 实例            var vm = new Vue({                // 对应 DOM 中的 id,意味着从接下来开始操作其内部(外部不受影响)                el: "#app",                // 定义数据对象                // data 用于定义属性,实例中有 message 属性                data: {                    message: "Hello"                },                // methods 用于定义的函数,可以通过 return 来返回函数值。                // {{ }} 用于输出对象属性和函数返回值。                methods: {                    details: function(){                        return this.message + "Vue";                    }                }            })        </script>    </body></html>
复制代码


当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。


除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。

四、Vue 模板语法

  • Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

  • Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

  • 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

五、插值

1. 文本

数据绑定最常见的形式就是使用{{...}}的文本插值:


<div id="app">  <p>{{ message }}</p></div>
复制代码

2. HTML

使用v-html指令用于输出 HTML 代码:


<div id="app">  <div v-html="message"></div></div><script type="text/javascript">  new Vue({    el: "#app",    data: {      message: "<h2>HTML插值</h2>"    }  })</script>
复制代码

3. 属性

HTML 属性中的值应使用v-bind指令。以下实例判断 use 的值。如果为 true 使用 class1 类的样式,否则不使用该类:


<div id="app">  <label for="r1">修改颜色</label>  <input type="checkbox" v-model="use" id="r1"/>  <div v-bind:class="{'class1': use}">    v-bind:class 指令  </div></div><script type="text/javascript">  new Vue({    el: "#app",    data: {      use: false    }  })</script>
复制代码

4. 表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

六、Vue 常用指令

<!DOCTYPE html><html>	<head>		<meta charset="utf-8" />		<title></title>		<style type="text/css">			[v-cloak]{				display: none;			}		</style><!--		导入vue文件-->		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>		<script src="./js/info.js" type="text/javascript" charset="utf-8"></script>	</head>	<body>		<div id="box"><!--			v-once:只加载一次,不再渲染--><!--			{{}}:代表插值,也就是在内部直接插入数据--><!--			<i v-once>{{ message}}</i>--><!--			v-cloak:当网速不好的情况下,暂不显示,等完全加载再出现,但需要配合css实现--><!--			<p v-cloak>{{ message }}</p>--><!--			v-text:直接替换内容,但不渲染html标签--><!--			<p v-text="message">原始内容</p>--><!--			<p v-text="name">原始内容</p>--><!--			v-html:直接替换内容,渲染html标签--><!--			<p v-html="message">原始内容</p>--><!--			<p v-html="name">原始内容</p>--><!--			v-if:条件渲染,当成立时显示,如果不成立,就不渲染(不会创建这个元素)--><!--			v-if注意点:可以直接从模型中获取数据,也可以赋值一个表达式--><!--			<p v-if="show">true</p>--><!--			<p v-if="hidden">false</p>--><!--			<p v-if="age >= 18">成年人</p>--><!--			<p v-if="age < 18">未成年人</p>--><!--			v-else:可以和v-if搭配使用,当v-if不满足条件时就执行v-else并显示其内容--><!--			v-else注意点:不能单独出现,且与v-if中间不能出现其他内容--><!--			<p v-if="age >= 18">成年人</p>--><!--			<p v-else>未成年人</p>--><!--			v-if,v-else-if,v-else--><!--			<p v-if="scoce >= 80">优秀</p>--><!--			<p v-else-if="scoce >= 60">良好</p>--><!--			<p v-else>差</p>--><!--			v-show和v-if都是条件渲染,取值是true就显示,取值是false就不显示,但v-if只要取值是false就不会创建该元素,--><!--			而v-show哪怕取值是false也会创建该元素,只是会设置该元素的dispaly为none--><!--			<p v-show="show">我是段落1</p>--><!--			<p v-show="hidden">我是段落2</p>-->			<ul>				<li v-for="(value, index) in list">{{index}},{{value}}</li>				<li v-for="(value, index) in 'abcdefg'">{{index}},{{value}}</li>				<li v-for="(value, index) in 6">{{index}},{{value}}</li>				<li v-for="(value, key) in obj">{{key}},{{value}}</li>			</ul>		</div>
<script type="text/javascript"> // 创建一个vue对象 let vue = new Vue({ // 指定vue对象控制的桌面区域 el: "#box", // 指定vue实例对象控制区域的数据 data: { message: "初始vue", name: "<b>我在加粗</b>", show: true, hidden: false, age: 17, scoce: 60, list: ["张三", "李四", "王五", "赵六"], obj: { name: "小明", age: 23, sex: "男" } } }) </script> </body></html>
复制代码

七、v-bind 指令

1、什么是 v-bind 指令

在企业开发中如果想要给“元素”绑定数据,我们可以使用{{}},v-text,v-html,但是如果想给“元素的属性”绑定数据,就必须使用v-bind,所以v-bind的作用是专门用于给“元素的属性”绑定数据。

2、v-bind 格式


  1. v-bind:属性名称 = “绑定的数据”

  2. :属性名称 = “绑定的数据”

3、v-bind 特点

赋值的数据可以是任意一个合法的 JS表达式,例如::属性名称 = “age+1”

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--		导入vue文件-->    <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>    <script src="./js/info.js" type="text/javascript" charset="utf-8"></script></head><body>    <div id="box"><!--        注意点:如果要给元素的属性绑定数据,那么是不能够使用插值语法的--><!--        <input type="text" value="{{message}}">-->
<!-- 注意点:虽然通过v-model可以将数据绑定到input标签的value属性上,--><!-- 但是v-model是有局限性的,v-model只能用于input/textare/select,--><!-- 但是在企业开发中我们还需要给其他标签的属性绑定数据--><!-- <input type="text" v-model="message">-->

<input type="text" v-bind:value="message"><!-- 以下为v-bind的另一种格式--><!-- <input type="text" :value="message">--> </div>
<script type="text/javascript"> let vue = new Vue({ el: "#box", data: { message: "张三" } }) </script>
</body></html>
复制代码

4、v-bind 指令的作用

v-bind指令给“任意标签”的“任意属性”绑定数据,对于大部分的属性而言我们只需要直接赋值即可,例如::value=“name”,但是对于 class 和 style 属性而言,它的格式比较特殊。

5、通过 v-bind 绑定类名格式

:class“[‘需要绑定类名’, ...]”

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        .size{            font-size: 30px;        }        .color{            color: red;        }        .active{            background-color: orange;        }    </style>    <!--		导入vue文件-->    <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>    <script src="./js/info.js" type="text/javascript" charset="utf-8"></script></head><body><div id="box"><!--    css的样式设置方式--><!--    <p class="size color active">我是段落</p>-->
<!-- 注意:如果需要通过v-bind给class绑定类名,那么不能直接赋值--><!-- 默认情况下v-bind会去Model中查找数据,但是Model中没有对应的类名,所以无效,因此不能直接赋值--><!-- <p :class="size">我是段落</p>-->
<!-- 注意:将类名放到数组中之后,还需要利用引号将类名括起来才会去style中查找--><!-- <p :class="['size']">我是段落</p>--><!-- <p :class="['size', 'color', 'active']">我是段落</p>-->
<!-- 注意:如果是通过v-bind来绑定类名,那么在绑定的时候可以编写一个三目运算符来实现按需绑定--><!-- <p :class="['size', 'color', flag ? 'active':'']">我是段落</p>-->
<!-- 注意:如果是通过v-bind来绑定类名,那么在绑定的时候可以通过对象来决定是否需要绑定--><!-- 格式:{'需要绑定的类名': 是否绑定}--><!-- <p :class="['size', 'color', {'active':false}]">我是段落</p>-->
<!-- 注意:如果是通过v-bind来绑定类名,那么还可以使用Model中的对象来替换数组--> <p :class="obj">我是段落</p></div>
<script type="text/javascript"> let vue = new Vue({ el: "#box", data: { flag: true, obj: { 'size': true, 'color': false, 'active': true } } })</script>
</body></html>
复制代码

6、如何通过 v-bind 给 style 属性绑定数据


  1. 将数据放到对象中

:style="{color:'red'}, 'font-size':'50px'"
复制代码


  1. 将数据放到 Model 对象中

obj:{	color: 'red',	'font-size': '80px'}
复制代码

注意:

  • 如果属性名称包含-,那么必须用引号括起来

  • 如果需要绑定 Model 中的多个对象,可以放到一个数组中赋值

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--		导入vue文件-->    <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>    <script src="./js/info.js" type="text/javascript" charset="utf-8"></script></head><body><div id="box"><!--    <p style="color: red">我是段落</p>-->
<!-- 注意:和绑定类名一样,默认情况下v-bind会去Model中查找,找不到所以没有效果--><!-- <p :style="color: red">我是段落</p>-->
<!-- 注意:我们只需要将样式代码放到对象中赋值给style即可,但是取值必须用引号括起来--><!-- <p :style="{color: 'red'}">我是段落</p>-->
<!-- 注意:如果样式名称带-,那么必须用引号括起来--><!-- <p :style="{color: 'red', 'font-size': '50px'}">我是段落</p>--><!-- 经测试以下这种写法也可以--><!-- <p :style="{color: 'red', fontSize: '50px'}">我是段落</p>-->
<!-- 注意:如果Model中保存了多个样式的对象,要把多个对象都绑定给style,--><!-- 那么可以将多个对象放到数组中赋值给style即可--> <p :style="[obj1, obj2]">我是段落</p></div>
<script type="text/javascript"> let vue = new Vue({ el: "#box", data: { flag: true, obj1: { "color": "blue" }, obj2: { "font-size": "50px" } } })</script>
</body></html>
复制代码


发布于: 2022-11-01阅读数: 48
用户头像

何极光

关注

路虽远,行则必至! 2022-10-25 加入

何程龙,计算机科学与技术专业毕业,现就任前端开发工程师。曾荣获:InfoQ写作社区专家博主、CSDN博客专家、签约讲师,中国开源协会-开发分会管理委员会委员。擅长Web前端、JavaScript框架、PythonWeb等领域及技术。

评论

发布
暂无评论
Vue基础知识整理【建议收藏】_Vue_何极光_InfoQ写作社区