v-cloak
作用:解决浏览器在加载页面时因存在时间差而产生的闪动问题
原理:先隐藏元素挂载位置,处理好渲染后再显示最终的结果
注意:要和css规则一起使用
eg:
<style>
[v-cloak] {
display: none;
}
</style>
<div v-cloak>
{{ message }}
</div
v-text
作用:填充纯文本
好处:相比插值表达式更加简洁;
不存在插值表达式的闪动问题;
eg:
<div id='app'>
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'<a href="http://www.baidu.com/">百度一下</a>'
}
})
</script>
v-html(后台运用居多)
作用:填充HTML片段
缺点:存在安全问题
eg:
<div id='app'>
<div v-html="html"></div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
html:'<a href="http://www.baidu.com/">百度一下</a>'
}
})
</script>
v-pre
作用:填充原始信息(对应之前html标签中的<pre>)
eg:
<div id='app'>
<div v-html="html"></div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
html:'<a href="http://www.baidu.com/">百度一下</a>'
}
})
</script>
v-once
作用:只渲染元素或组件一次,之后元素或组件失去响应式
eg:
<div id="app">
<h3>{{message}}</h3>
<!-- 动态修改message值,此绑定将不会发生改变 -->
<div v-once>{{message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
const vm = new Vue({
el: '#app',
data: {
message: '你好世界'
}
})
</script>
v-bind(重点)
作用:动态绑定一个或多个(可以用“ :”代替)
eg:
<body>
<div id="app">
<a :href="url" :target="type" :alt="alt">{{alt}}</a>
<a :href="url">{{alt}}</a>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
url: 'https://www.fliggy.com/',
type: '_blank',
alt: '飞猪官网'
}
})
</script>
v-on(重点)
作用:绑定事件监听器(事件绑定 可以用“ @ ”代替)
eg:
<style>
#big {
width: 300px;
height: 300px;
background-color: red;
}
#mid {
width: 200px;
height: 200px;
background-color: green;
}
#sma {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div id="app">
<div id="big" @click="say('大娃',$event)">
<div id="mid" @click="say('二娃',$event)">
<div id="sma" @click="say('三娃',$event)"></div>
</div>
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods:{
say: function(name,event){
console.log('你点了' + name);
}
}
})
</script>
v-for(循环指令)
作用:根据一组数组或对象的选项列表进行渲染
eg:
<body>
<div id="app">
<div>
<ul>
<li :key="index" v-for="(item,index) in cars">{{item}}</li>
</ul>
</div>
<div>
<ul>
<li :key="index" v-for="(item,key,index) in user">{{key}}:{{item}}</li>
</ul>
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
cars: ['bmw','aodi','benci','haima'],
user: {
username: 'zhangsan',
gender: 'mele',//性别,sex
age: 22
}
}
})
</script>
v-if v-else v-else-if v-show(分支指令)
v-show:根据表达式的真假值切换display 的css属性,显示或者隐藏
eg:
<!-- 模板部分 -->
<div v-if="score >= 90">
优秀
</div>
<div v-else-if="score >= 80 && score < 90">
良好
</div>
<div v-else-if="score >= 70 && score < 80">
一般
</div>
<div v-else>
不及格
</div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>
<!-- JavaScript部分 -->
......
data: {
score: 88,
flag:false
}
v-model(重点)
作用:表单元素的绑定,实现了数据的双向绑定,通过表单项可以改变数据
eg:
普通文本框:
<div id='app'>
<p>{{message}}</p>
<input type='text' v-model='message'>
<!--
v-model其实是`语法糖`,它是下面这种写法的简写
语法糖:这种语法对语言的功能并没有影响,但是更方便程序员使用
-->
<input type='text' :value='msg' @input='msg=$event.target.value'/>
</div>
<script type='text/javascript'>
new Vue({
el: '#app',
data: {
msg: 'message默认值'
}
})
</script>
多行文本框:(只能接收数据,不能改变数据)
<div id='app'>
<textarea v-model="message"></textarea>
</div>
<script type='text/javascript'>
new Vue({
el: '#app',
data: {
message: '我是多行文本内容'
}
})
</script>
单个复选框:
<div id='app'>
<textarea v-model="message"></textarea>
</div>
<script type='text/javascript'>
new Vue({
el: '#app',
data: {
message: '我是多行文本内容'
}
})
</script>
多个复选框:
<div id='app'>
<input type="checkbox" value="html" v-model="checkedNames">
<input type="checkbox" value="css" v-model="checkedNames">
<input type="checkbox" value="js" v-model="checkedNames">
</div>
<script type='text/javascript'>
new Vue({
el: '#app',
data:{
// 如果数组中有对应的value值,则此checkbox会被选中
checkedNames:[]
}
})
</script>
单选按钮:
<div id='app'>
男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
</div>
<script type='text/javascript'>
new Vue({
el: '#app',
data: {
sex: '女'
}
})
</script>
下拉框:
<div id='app'>
<select v-model="selected">
<option>请选择</option>
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
</select>
</div>
<script type='text/javascript'>
new Vue({
el: '#app',
data: {
selected: 'JS'
}
})
</script>