一、v-text与v-html
v-text更新html元素的innerText
v-html更新html元素的innerHtml
如果需要更新部分内容需要使用{{ }} 双括号差值表达式
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE指令 v-text v-html</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
v-html 可以识别标签
v-text 不可以识别标签
两个都会替换标签元素的内容
-->
<div id="app">
<div v-text="info"> <span>默认</span> 666 </div>
<div v-html="info"> <span>默认</span> 666 </div>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
info:" <p> 这是个段落 </p> "
}
})
</script>
</body>
</html>
二、v-if与v-show
两者都是根据表达式的值得真假确定是否渲染元素
v-if表达式真假改变时元素会被销毁或者重建
v-show表达式真假改变时元素不会被销毁或者重建，只是切换了display属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue指令 v-if</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- v-if 每次都会渲染原始文本 （重建元素） -->
<p v-if="flag">这是p标签</p>
<span v-else>这是行内标签</span>
<span v-if="score>90">优秀</span>
<span v-else-if="score>70">还行</span>
<span v-else-if="score>60">凑乎</span>
<span v-else>渣渣</span>
<!-- v-show只是切换元素display样式 -->
<p v-show="flag">这是个段落</p>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
flag:false,
score:80
}
})
</script>
</body>
</html>
<!--
怎么考虑使用v-if 或者 v-show
频繁切换使用v-show
在初始化时就控制显示隐藏使用v-if
v-show初始开销大 v-if频繁切换开销大
-->
三、v-for
列表渲染 需要使用v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE 指令 v-for</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- item 项目 代表可迭代对象中的一个元素 -->
<!-- :key 用于VUE虚拟DOM的优化操作 只可以取值 number string -->
<!-- 遍历数组得到第一个形参为数组中的每一个对象 第二个形参为元素索引 -->
<p v-for="(item,index) in weekday" :key="item"> {{index}} {{item}}</p>
<!-- 遍历证书 第一个形参为从1开始的数值 第二个形参为索引-->
<span v-for="(item,index) in 9" :key="index">{{index}}--{{item}}</span>
<!-- 遍历字符串第一个形参为每一个字符 第二个形参为索引 -->
<p v-for="(item,index) in 'hello'" >{{index}}--{{item}}</p>
<!-- 遍历对象时第一个形参为值 第二个形参为键 第三个形参为索引 -->
<div v-for="(value,key,index) in myobj" :key="key">{{index}}--{{key}}--{{value}}</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
weekday:["星期1","星期2","星期3","星期4","星期5","星期6","星期7",],
myobj:{
name:"zzy",
age:20
}
}
})
</script>
</body>
</html>
四、v-on与@
所注册的事件都要写在methods属性中
v-on:事件名称
v-on:事件名称形式 可以使用@事件名称替代
@click.once可以执行一次事件
@click.prevent 可以阻止默认事件执行
@click.stop 可以阻止事件冒泡
@keyup.enter键盘之类事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE 指令 v-on</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 监听键盘事件 -->
<input type="text" @keyup.a.n="mykeyup">监听按键
<br>
<!-- 阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent>百度</a>
<!-- 仅执行一次 -->
<span @click.once="goto123()">点击只有一次相应</span>
<div id="div1">
div1
<div id="div2" @click="myclick2">
div2
<div id="div3" @click.stop="myclick3">
div3
</div>
</div>
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
},
methods:{
myclick2(){
console.log("点击了div2");
},
myclick3(){
console.log("点击了div3");
},
goto123(){
console.log("goto 123");
},
mykeyup(e){
console.log("抬起",e.key);
}
}
})
</script>
</body>
</html>
五、v-bind与冒号(😃
可以将data中变量与属性进行绑定
v-bind:属性名=“”
v-bind可以省略直接使用 :属性名
当绑定的为class或者style样式时需要注意有所不同
:class 值为数组时根据数组中元素的真实值取类名 值为对象时根据键值对的值确定类名是否有键
:style 值为数组时需要使用对象作为数组元素 值为对象键值对即为style样式键值对
案例：绑定普通属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 使用v-bind绑定title属性 如果值中有纯粹字符串需要使用字符串格式单引号或者双引号 -->
<span v-bind:title="info+'span1'">鼠标划入有提示</span>
<!-- 使用冒号代替 v-bind -->
<span :title="info+'span2'">鼠标划入有提示</span>
<!-- 绑定的值为对象 -->
<a :href="baidu.href">{{baidu.text}}</a>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
info:"我是一个span",
baidu:{
href:"http://www.baidu.com",
text:"百度"
}
}
})
</script>
</body>
</html>
案例：绑定类名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
p.red{
color: red;
}
p.blue{
background-color: lightblue;
}
p.bigger{
font-size: 30px;
}
</style>
</head>
<body>
<!--
使用v-bind绑定类名需要注意 可以有列表和字典两种形式
如果是列表 列表中元素如果是纯字符串 直接使用 如果是变量 类名就是变量对应的值
如果是字典 类名能不能取键 取决于键对应的值为true或者false 如果值为变量 需要解释
列表中的元素 是不是 类名？如果是变量 类名是变量对应的值 如果是纯字符串 类名为该字符串
对象中的健 是不是类名？键一定是类名 但是能不能显示这个类名 取决于键对应的值
-->
<div id="app">
<p :class="[color,'blue']" class="bigger">p1</p>
<p :class="{red:true,blue:flag}">p2</p>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
color:"red",
flag:false
}
})
</script>
</body>
</html>
案例：绑定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p style="color: red; background-color: lightcoral;">p1</p>
<!-- 当：style 值为对象时 对象的健必须为样式名 不能使用-这个连字符 需要转小驼峰
对象的值 如果是变量 需要解释 如果是纯字符串 直接使用
-->
<p :style="{color:color,backgroundColor: 'lightcoral'}" style="font-size: 30px;">p2</p>
<!-- 当style的值为数组时 要求数组中的每一个元素都必须为对象
对象 中的健必须是样式属性名 对象的值如果是变量需要解释 如果是纯字符串 直接使用
-->
<p :style="[{color:color},{backgroundColor:'lightcoral'} ]">p3</p>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
color:"red",
}
})
</script>
</body>
</html>
六、v-model
在表单控件或者组件上创建双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE指令v-model</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<form action="#" method="get">
<div>
<h1>普通输入框使用字符串</h1>
<input name="normal" type="text" v-model="info">
<br>
你输入的为 <span>{{info}}</span>
</div>
<div>
<h1>复选框使用数组</h1>
爱好：
<br>
足 <input name="hobbys" v-model="hobbys" type="checkbox" value="足球">
<br>
篮 <input name="hobbys" v-model="hobbys" type="checkbox" value="篮球">
<br>
羽毛 <input name="hobbys" v-model="hobbys" type="checkbox" value="羽毛球">
</div>
<div>
<h1>单选框使用字符串</h1>
性别:
<br>
男 <input type="radio" v-model="gender" value="男生" name="sex">
<br>
女 <input type="radio" v-model="gender" value="女生" name="sex">
</div>
<div>
<h1>单个下拉选项使用字符串</h1>
<select name="address" v-model="address">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广州">广州</option>
</select>
</div>
<div>
<h1>多个下拉选项使用数组</h1>
<select name="address2" v-model="address2" multiple>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广州">广州</option>
</select>
</div>
<input type="submit" value=""/>
</form>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
// MVVM 双向绑定 将数据同步到视图 将视图同步到数据
info:"",
hobbys:["篮球","羽毛球"],
gender:"女生",
address:"广州",
address2:["广州","北京"]
}
})
</script>
</body>
</html>
七、自定义指令
可以使用vue的directives属性扩展指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE自定义指令</title>
<style type="text/css">
#div{
height: 50px;
background-color: lightblue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-show="flag">v-show 使用原生指令控制显示隐藏效果 </div>
<div v-myshow="flag">v-myshow 使用自定义指令控制显示隐藏效果</div>
<div id="div" v-dbsize="flag">v-dbsize 使用自定义指令控制尺寸变化效果</div>
<button @click="flag=!flag">点击切换div效果</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
flag:true
},
directives:{
"dbsize":{
inserted(ele,state){
if(state.value){
let height = getComputedStyle(ele).height;
height= height.substr(0,height.length-2);
ele.style.height = height*2 +"px";
}
},
update(ele,state){
if(state.value){
let height = getComputedStyle(ele).height;
height= height.substr(0,height.length-2);
ele.style.height = height*2 +"px";
}
else{
let height = getComputedStyle(ele).height;
height= height.substr(0,height.length-2);
ele.style.height = height/2 +"px";
}
}
},
"myshow":{
// 创建元素时执行
inserted(element,state){
if(state.value){
element.style.display="block";
}else{
element.style.display="none";
}
},
// flag值发生变化会执行
update(element,state){
if(state.value){
element.style.display="block";
}
else
{
element.style.display="none";
}
}
}
}
})
</script>
</body>
</html>
