Vue
el挂载点
<div id="app">{{message}}
</div>
<script>var app = new Vue({el:"#app",data:{message:"hello"}})
</script>
- Vue实例的作用范围：管理el选项命中的元素及其内部的后代元素
- 使用其他的选择器？：可以，建议用ID选择器
- 设置其他的dom元素？：可以使用双标签，不能使用HTML和BODY
data数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，要遵守js的语法
本地应用
- 通过Vue实现常见的网页效果
- Vue指令：以v-开头的一组特殊语法
v-text
作用：设置标签的内容
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
内部支持写表达式
//全部内容
<h2 v-text="message"></h2>
//部分内容
<h2>{{message}}</h2>
//表达式，字符串拼接
<p v-text="message"+"!"></p>
v-html
作用：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text无论内容是什么，只会解析为文本
解析文本使用v-text，解析html结构使用v-html
<p v-html="content"></p>
//content为超链接时，解析为超链接
v-on
作用：为元素绑定事件
事件名不需要写on
指令可以简写为：@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
<div id="app"><input type="button" value="v-on test" @click="doit">
</dive><script>var app=new Vue({el:"#app",data:{message:"vegetable"}methods:{doit:function(){alert("do it!")this.message+="!"}}})
</script>
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时，需要定义形参来接受传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种
<input type="text" @keyup.enter="sayhello">
v-show
作用：根据真假切换元素的显示状态
原理：修改元素的display，实现显示隐藏
内容最终解析为布尔值
true——元素显示，false——元素隐藏
数据改变后，对应元素的显示状态同步更新
v-if
作用：根据表达式的真假，切换元素的显示状态
本质：通过操纵dom元素来切换显示状态
true——元素存在于dom树中，false——从dom树中移除
频繁切换使用v-show，否则使用v-if，前者切换消耗小
v-bind
作用：为元素绑定属性
完整写法是v-bind:属性名
简写是 :属性名，即省略v-bind字样
需要动态的删增class，最好使用对象的方式
<img :class="{active:isActive}" @click="toggleActive">
//对象方法<img :class="isActive ? 'active' : ''" @click="toggleActive">
//三目运算方法
v-for
作用：根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
<ul><li v-for="(it,index) in arr">{{index+1}} 是 {{it}}</li>
</ul>//结合其他指令
<h2 v-for="item in arr" v-bind:title="item.name">{{item.name}}
</h2>
v-model
作用：便捷地设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<==>表单元素的值（双向修改）
