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的值绑定。

另外一个例子：

#动态参数

从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 提供了特定简写：

1. v-bind：

//正常写法

//缩写

2. 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