本文介绍了Vue.js的基本模板语法，包括插值、指令等，并深入探讨了响应式原理，即通过Object.defineProperty实现数据变化与视图更新的同步。
核心思想：数据驱动
1. 模板语法
(1)插值
a.文本 {{ }}
b.纯HTML
v-html 防止XSS(跨站脚本攻击，盗取cookie,伪装成用户)
c.表达式
(2)指令：是带有 v- 前缀的特殊属性
v-bind 动态属性绑定
v-if 条件（DOM元素是否输出）
v-show
v-for 循环
v-on:click 事件绑定
v-model 双向数据绑定 （原理：es5的object.defineProperty的get/set拦截，此方法不兼容ie8以下，所以vue不兼容ie8以下，Jquery2.0也不兼容ie8以下）
(3)缩写
v-bind:src => :src
v-on:click => @click
//基本模板
<body>
<div id="box">
{{legionname}} //声明式渲染
</div>
</body>
<script>
new Vue({
el:"#box", //有效范围
data:{
legionname:"legion",
myage:100, //数据
}，
methods:{
//方法
legion:function(){}
}
})
</script>
//（响应式渲染） 数据驱动
//响应式实现原理
<div id="box">
{{ legionname }}
{{ myage }}
{{ 10+20 }}
{{ isshow?'aaa':'bbb' }}
<div v-html="myhtml"> //v-html 指令
解析html标签 相当于innerhtml
</div>
<div v-if = "isshow"> // v-if 指令
动态 创建、 删除
</div>
<div v-show = "isshow"> //v-show 指令
动态 删除、 隐藏
</div>
<img v-bind:src:"{{ imgsrc }}" /> //v-bind 指令 对于属性绑定 v-bind:src 简写=> :src
<div v-bind:class="{{ legion }}">
</div>
<button v-on:click="legionClick()"></button> //v-on 指令 v-on:click 简写=> @click
</div>
<script>
var vm = new Vue({ //命名为对象 （响应式渲染） 数据驱动
el:"#box",
data:{
legionname:"legion",
myage:100,
myhtml:'<b>haha</b>'//不在v-html 指令里，不会解析标签
imgsrc:"http://aaa",
legion:"legion"
}
methods:{
legionClick:function(){
this.isshow=false; //this 指向vm
}
}
})
</script>
2、Object.defineProperty的get,set拦截: （Vue数据更新原理、响应式原理）
获取是get方法，设置是set方法；
进行get\set拦截，实现响应式原理，改变数据就改变页面
低版本浏览器不支持 ，ie8以上使用
学习框架步骤
扫一扫
2679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
