学习vue的第一二三四五天

学习vue的第一二三四五天

一.模板语法：允许开发者把DOM绑定在最底层Vue实例上。在底层实现上，Vue会将模板编译成虚拟DOM渲染函数，Vue可以计算出最少需要重新渲染多少组件，并减少DOM操作。

　　1.插值

　　　　#文本

 　　　　数据绑定最常见的就是Mustache语法(双大括号){{msg}}的文本插值。你也可以用v-once指令来定义一次性插值，数据改变插值处的内容也不会改变，但是请注意，这会影响到该节点的其他插值。

　　　　//html                //js              //浏览器

 

　　　　我在这里给span标签添加了一个点击事件，运用了v-once指令，点击span标签内容仍不会改变。

 

　　　　#v-html

 

　　　　双大括号输出的只是文本，想输出html代码，需要用到v-html指令

　　　　//html和js                            //浏览器     

 

　　　　浏览器里，上面输出的就是纯文本，下面就是把aaa里的东西变成了html代码再渲染到了浏览器上，可以看到字体变成了红色。

　　　　！注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

 

　　　　#特性

 

　　　　Mustache语法不能作用在HTML特性上，需要用v-bind指令来进行操作，

　　　　

　　　　用v-bind把class绑定在div上，shtie是一个变量名，初始值等于one，div初始是one的样式。当点击div时，改变shtie变量的值为two，div就会变为two的样式。
　　　　//点击前            //点击后                  （样式有点丑，见谅）

 

　　　　v-bind也可以用来绑定布尔值

　　　　

　　　　isButtonDisabled的值如果为false、null、undefined，那么disabled不会被包含在渲染出的元素中：

 

　　　　isButtonDisabled=false //未禁用        isButtonDisabled=true  //已禁用       

　　　　

　　　 　#JavaScript表达式

 

　　　　所有的数据绑定都支持JavaScript表达式：

　　　　{{number + 10}}

　　　　//html和js                   //浏览器显示    

 

　　　　

　　　　//html js css                 //浏览器显示      

 

　　　　{{ok ? 'yes' : 'no'}}     (yes和no是字符串)

　　　　ok布尔值为true时显示yes             ok布尔值为false时显示no 

 

　　　　

　　　　{{ message.split('').reverse().join('') }}   (把一个字符串分割成字符串数组，颠倒数组中元素，把数组所有元素放入一个字符串)

　　　　//html和js                   //浏览器显示

　　　　

　　　　有个限制，每个绑定只能包含单个表达式，下面例子不会生效

　　　　//这是语句不是表达式

　　　　{{ var a = 1}}

　　　　//控制流不会生效，三元表达式可以

　　　　{{ if（ok）{return  true} }}

 

　　 2.指令

 

　　　　 #参数

 

　　　　指令是带有v-前缀的特殊特性，指令特性的预期值是单个JavaScript表达式(v-for是例外)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用与DOM。

　　　　

123

　　　　这里的v-if就是根据see值的真假来决定插入或移除

　　　　一些指令可以接收一个参数，在指令名称后以冒号表示。例如v-bind可以响应式的更新HTML特性：

　　　　

　　　　在这里href是参数，告知v-bind指令该元素的href特性与表达式url的值绑定。

　　　　另外一个例子：

    v-on是监听DOM事件的指令，在这里参数是监听的事件名。

 

　　　　 #动态参数

 

　　　　从2.6.0开始，可以用方括号[]括起来的JavaScript表达式作为一个指令的参数，

　　　　

　　　　这里的name会作为一个JavaScript表达式进行动态求值，求的值会作为最终参数来使用。例如你的data里面name的值为href，那这个绑定就等价于v-bind：href。

　　　　同样的也可以使用动态参数为一个动态事件名绑定处理函数，

　　　　

　　　　当event的值等于click时，v-on:[event]等价于v-on:click。

　　　　动态参数预期会求出一个字符串，异常情况下值为null，这个特殊的值可以用作显性移除绑定。任何非字符串类型的值都会触发一个警告。

　　　　        //动态指令参数的值无效（应为字符串或null）

 

　　　　动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名，会报错。

　　　　下面的代码是无效的，会报错：

　　　　

　　　　变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

　　　　另外，如果在DOM中使用模板，需要留意浏览器会把特性名全部强制转化为小写：

　　　　

    在 DOM 中使用模板时这段代码会被转换为：

　　　　

　　　　 #修饰符

　　　　

　　　　修饰符是以半角句号.指明的特殊后缀，用于一个指令应该以特殊方式绑定。

 

　　　　.lazy

 

　　　　在默认情况下，v-model是在每次input事件触发后将输入的值与数据进行同步，添加.lazy可以让其转变为change事件时同步，而非input：

　　　　//html和js             （浏览器效果图没法展示，可自行实验）

　　　　

　　　　.number

　　

　　　　如果想让用户输入值自动转化为数值型，可以在v-model后加.number

　　　　     //上面的是没有加.number，打印出来的是字符型String。下面的是加上.number，打印出来是数值型Number。

 

　　　　.trim

 

　　　　如果想自动过滤掉用户添加的首尾空白字符，在v-model后加.trim

　　　　                         //这两个输入时都在前面加了若干空格，后面一个是用了.trim修饰符的效果，过滤掉了前面加的空格

     　　

　　 3.缩写

 

　　　对于一些常用操作v-会变得非常繁琐，因此vue为 v-bind 和 v-on 提供了特定简写：

 

　　   v-bind：

 

　　　　//正常写法

　　　　

　　　　//缩写

　　　　

 

　　   v-on:

 

　　　　//正常写法

　　　　

　　　　//缩写

　　　　

 

二. 计算属性和监听器

　　

　　 1.计算属性

 

　　　　模板内的表达式很便利，但是设计它的初衷是为了简单运算，在模板中放入太多逻辑会让模板过重切难以维护。例如:

　　　　{{ msg.split('').reverse().join('') }}

　　　　在这个地方就不是简单的声明式逻辑，对于任何复杂逻辑，都应当使用计算属性。

 

　　　　 #基础例子

　　　　

　　　　

　　　　这里我们声明了一个计算属性reverseMsg，让你想在模板里做的复杂逻辑在reverseMsg里操作，你可以像在模板里绑定普通数据一样绑定计算属性。

　　　　Vue知道reverseMsg依赖于msg，所以当msg改变时，所有依赖于reverseMsg的绑定也会更新。

 

　　　　计算属性默认只有getter函数

　　　　//html和js             //浏览器显示

 

 　　　　这两种写法显示是一样的，可以给data中的firstName和lastName重新赋值，但是给reverseMsg重新赋值就会报错，提示没有setter函数，在需要时也可以提供一个setter函数。

　　　　

　　　　这是因为你对reverseMsg赋值时，传入的值保存在value中，然后把value中的值被空格分割成一个数组分别赋给firstName和lastName，当firstName和lastName改变时，就又触发计算属性重新计算，从而改变页面。

 

　　　　#计算属性缓存vs方法

 

　　　　通过在表达式中调用方法也可以达到同样的效果：

 　　　　

 

 　　　 虽然两个方式最后的结果是相同的，但是不同的是计算属性是基于它们的响应式依赖缓存的，只有相关响应式依赖改变它们才会重新求值，也就是说只要msg没有发生改变，多次访问reverseMsg计算属性会立即返回之前的计算结果，而不必再执行函数。

　　　  相比之下，每次触发重新渲染，调用方法将总会再次执行函数。

　　　  为什么要缓存？假设有一个计算属性A，它需要做一些非常复杂且大量的计算，然后有一个依赖于A计算属性，如果没有缓存，我们会不可避免的多次执行A中的getter函数。如果你不希望有缓存，可用方法代替。

　　　　

           #计算属性vs侦听属性

 

 　　　 vue提供了一种通用的方式来观察和响应vue实例上的数据变动：侦听属性watch。

 　　　 //html和js            //浏览器和控制台显示

 

 　　　其中newVal是改变之后的值，oldVal是改变之前的值。

　　　 当有一些数据需要随着其它数据变动而变动时，很容易滥用 watch，通常更好的做法是使用计算属性而不是命令式的回调watch。

三. class与style绑定

　　操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

　　1. 绑定HTML Class

　　　　#对象语法

 　　　　我们给v-bind：class绑定一个对象，来动态切换css：

　　　　

　　　　现在active这个class的存在与否就取决于isActive的真值了。

　　　　你可以在对象传递更多属性来动态切换多个class，此外v-bind：class也可以和普通class共存：

　　　　//HTML和js                        //浏览器控制台显示

 

 　　　　当 isTwo 和 isError 变化，class列表也相应的更新。例如isError的值变为true，class列表将变为class=“one two button-text”。

　　　　绑定的对象不用内联定义在模块里：

　　　　//HTML和js                             //浏览器控制台显示

 

 　　　　两种写法渲染是相同的，也可以在这里绑定一个返回对象的计算属性，这是个常用且强大的模式：

 　　　　

 

　　　　#数组语法

　　　　我们可以传一个数组给v-bind：class，以应用一个class列表：

　　　　//html和JS                    //浏览器控制台显示

 

　　　　也可以运用三元表达式，

。

　　　　这样写始终添加errorClass，但只有isActive为真值时才添加active。不过当有多个条件class时，这样写太繁琐，所有数组语法也可以使用对象语法：

　　　　

　　　　

　　　　#用在组件上

　　　　当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

 　　　　//父组件      //子组件     // 浏览器

 

 　　　　我这里是将组件拆出去，然后在父组件里引用子组件。以上面为例，bbb相当于一个包在子组件外的div，是子组件的容器，就算没有定义类名，这个div还是会存在。

　　　　对于带数据绑定也同样适用：

　　　　      当isActive为真值时，active将被渲染。

　　2. 绑定内联样式

　　　　#对象语法

　　　　v-bind：style的对象语法很直观，看着非常像css，但其实是一个JavaScript对象，css属性名可以用驼峰式命名（fontSize）或短横线分割（font-size，记得用引号括起来：“font-size”）来命名：

　　　　

 

 　　　　直接绑定到一个样式对象通常更好，这会让模板更清晰：

　　　　

　　　　同样的，对象语法常常结合返回对象的计算属性使用。

 

　　　　#数组语法

 

　　　　v-bind：style可以将多个样式对象应用到一个元素上：

　　　　

 

 　　　　#多重值

 

　　　　从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

　　　　

　　　　这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

 四. 条件渲染

　　1. v-if

　　　　v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。

 　　　　

yes

　　　　也可以用 v-else 添加一个“else 块”：

 　　　　

yes

　　　　

no

 

　　　　#在template元素上使用v-if条件渲染分组

 

　　　　因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个