new Vue({
el:" #root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
data:{ } //data中用于存储数据,数据供e1所指定的容器去使用,值我们暂时先写成一个对象。
methods //定义方法
computed //计算属性
watch //监视属性
})
指令语法:用于解析标签(包括:标签属性,绑定事件,标签体内容...)
v-bind:绑定属性,可简写':'
v-model: 双向数据绑定(页面改变数据可影响数据),只能用于表单类元素
v-model:value可以简写为v-model
事件修饰符
prevent:阻止默认事件;
stop:阻止事件冒泡;
once:事件只触发一次;
capture:使用事件的捕获模式;
self:只有event.target是当前操作的元素是才触发事件;
passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
trim:去掉空格;
number(bug:a12这种会被识别,type改为number):数字限制
lazy:vue中的onchange方法(懒监听)
v-on:事件绑定,可简写'@'
v-if v-else-if v-else:vue中的条件指令(如果节点不符合条件,则不加载该节点)
v-show:vue中判断按钮显示的指令(不显示使用display:none样式设置隐藏)v-text
1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会.v-html指令:
1.作用:向指定节点中渲染包含html结构的内容
2.与插值语法的区别:
(1).v-html会替换掉节点所有的内容,{{xx}}则不会
(2).v-html可以识别html结构。
3.严重注意: v-html有安全性问题!!!!
(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击
(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!v-cloak指令(没有值);
1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
[v-cloak]{display:none;}v-once指令:
1.v-on ce所在节点在初次动态渲染后,就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。v-pre指令:
1.跳过其所在节点的编译过程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译.