Vue.js学习过程记录——vue.js中指令学习（第一天）

Vue.js学习过程记录——vue.js中指令学习（第一天）
前言：这是第二次进行vue.js的学习，距离上次的学习已有半年时间，第一次的学习之后通过视频教程，自己手写一些小demo，以及后面完成一个基于vue.js的小项目，对vue的基础有了一定的了解，其实在近期的面试当中发现vue被问的比例非常大，基本上所有公司都有问vue的问题，但是在回答的时候对于一些基础的知识点掌握的还不够熟练，故想重新学习，也当做是复习，并把本次的学习的整个过程每天记录 在博客里，此次会从vue的基础知识到一个基于vue框架的完整项目开发搭建到部署整个流程！话不多少，干!

1.双大括号语法：{{}}
（1）格式：{表达式}}
（2）作用：主要是用于获取数据，注意：可以使用JavaScript表达式，例如：{{number+1}}
源代码如下：

结果显示效果图：

2.一次性插值：v-once
——通过使用v-once指令，可以执行一次性插值，当改变数据时，插值处的内容不会更新。
源代码如下：

结果显示效果图：

3.输出HTML指令：v-html
（1）格式：v-html=‘xxxx’
(2) 作用：1.如果输出的数据格式是html，那么双大括号只能解析为普通的文本格式，要想输出真正的html格式，需要使用v-html指令；
2.Vue为力了防止XSS攻击，在这个指令上做了安全处理，当发现输出的内容有script标签时，则不渲染；
ps：XSS攻击主要利用JS脚本注入到网页中，读取Cookies值（cookies一般存储了登录身份的信息），读取到了身份信息发送到黑客的服务器上，从而黑客就可以使用你的账户做非法操作，另外，XSS攻击还可以在你支付的时候，跳转到钓鱼网站，盗取你的账户密码；
源代码如下：

结果显示效果图：

4.元素绑定指令：v-bind
(1)完整格式：v-bind：元素的属性名=‘xxxx’
(2)缩写格式：:元素的属性名=‘xxxx’
(3)作用：将数据动态绑定到指定的元素上
源代码如下：

结果显示效果图：

5.事件绑定指令：v-on
（1）完整格式：v-on：事件名称=“事件处理的函数名”
（2）缩写格式：@时间名称=“事件处理的函数名” 注意：@后面没有冒号
（3）作用：主要是用于监听DOM事件
源代码如下：

结果显示效果图：


12月19日学习到此为止，最后稍稍推荐一些关于Vue的学习资源：
（1）英文官网：http://vuejs.org/
（2）中文官网(中文文档很友好)：http://cn.vuejs.org/
（3）官方教程：https://cn.vuejs.org/v2/guide/
（4）Github:https://github.com/yyx990803
（5）API文档：https://cn.vuejs.org/v2/api/
对于书籍的话不太建议买，我自己也没买，因为很多都是抄官网的，还可能有错误，我们直接查看官方文档就行了！
ByeBye！！！