Vue练习

Vue的指令。
在vue中所有的指令都是以v开头的，例如 v-cloak，指令的本质就是自定义属性。

在上面的演示代码中用插值表达式会存在一个问题，“闪动”。

1.1.1:v-cloak指令
闪动就牵扯到了，他们的编译方式问题，在代码中他是先运行这个插值表达式，{{msg}}然后在执行，下面的<script></spript>的代码里面的msg渲染。这样的话页面可能会只显示{{msg}}这个，所以为了避免这个问题的发生，我们会用到一个v-cloak这个指令。

他的写法是：   <div v-cloak>{{msg}}</div>写在div里面。

因为你写了这个插值表达式，因为插值表达式是先执行后渲染值，而v-cloak这个指令是直接把值给你渲染了，所以比较方便。

1.1.2:v-text指令
更新元素的内容，如果要更新部分元素的内容则要用到{{Mustache}}插值。

他的写法是:<span>{{msg}}</span>

他的这个跟插值两个都差不多，但是写法不一样。

1.1.3：v-html指令
这个指令，就是你直接写在msg写html标签，然后在div里面写上一个v-html标签就能给他显示出来，他能直接识别出来这个标签，注意，这个标签在网站上动态渲染任意html是非常危险的，容易导致xss攻击，只在可信内容上使用，永远不能用在用户提交的内容上。也就是说这个用于内部和网站提交数据，第三方的话就不要用了，因为不安全。

这个具体的代码如下:

 

1.1.4 v-pre标签，这个与v-html相反。他能跳过元素的编译过程
具体的用法就是在div里面写上v-pre，然后在在里面写这个上面的msg1，然后运行就能看见效果了。

1.1.5 数据响应式
怎么理解这个响应式，

1，html5中的响应式(屏幕尺寸的变化导致样式的变化)。

2，数据的响应式(数据的变话导致页面内容的变化)。

什么是数据绑定

1数据绑定:将数据填充到标签中

v-once只编译一次

1，显示内容之后不在具有响应式的功能。

具体的用法:

是给vue赋值一个对象，然后在浏览器打开f12。在里面进行赋值操作

具体代码：

 

 他的页面f12赋值效果:在这个控制台写vm.msg=然后跟你想要的数字。

 

 这个就叫数据响应式，数据的变化导致页面内容的变化。
1.1.6双向数据绑定 ：v-model（这个是这个vue的mvvm这个框架的核心）：
这个传输其实算是页面的数据在传输,
你使用f12的vm.msg也能改变，也能传值，这个传值叫，数据向页面在传输。
这就叫数据的双向绑定

 什么是MVVM设计思想?
1,M(model)
2,V(view),
3,(View-Model)
视图到数据到模型
模型把数据发到视图
他们是双向的数据绑定。

1.1.7事件的绑定，第一种是v-on:click，第二种是@click
也可以成为点击事件，

 

这个写有两种方式，第一种是，v-on:click，第二种是@click

你可以定义一个值为0的对象，通过单击按钮让他是先自增，也可以通过给他一个传一个参数，通过handle()来传对象，如果要用handle这个方法的话，你要写一个methods:的方法。这个this就代表这个vue，传参数的话，括号()里面的p是固定的，p1，最后一个一定是event，传对象，最后一定是event来传对象。

 

其中console.log是代表在控制台输出这个值。