一、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 格式
v-bind:属性名称 = “绑定的数据”
:属性名称 = “绑定的数据”
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 属性绑定数据
将数据放到对象中
:style="{color：'red'}, 'font-size':'50px'"
复制代码
将数据放到 Model 对象中
obj:{ color: 'red', 'font-size': '80px'}
复制代码
注意：
<!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>
复制代码
评论