Vue是什么?
Vue(读音/vju:/)是一套用于构建用户界面的渐进式框架。
Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
指令
1.本质就是自定义属性
2.Vue中指定都是以v-开头。
V-cloak
防止页面加载时出现闪动问题
[v-cloak]{
display:none;//先让元素进行隐藏
}
<div id='app'>
<div v-cloak>{{msg}}</div> //添加v-cloak属性,
</div>
<script type="text/javascript" src="js/vue.js">//引入vue.js库文件
<script>
var vm=new Vue({
el:'#app', //指定元素id是app的元素
data:{ //data存储数据
msg:'hello vue'
}
v-text
1.v-text 指令用于将数据填充到标签中,作用与插值表达式类似,但是v-text没有闪动问题
2.如果数据中有html标签会将html标签一并输出
3.此绑定为单向绑定,数据对象上的值改变,插值会发生改变,但是当插值发生变化并不会影响数据对象的值。
<div id='app'>
<p v-text='msg'></p> //在指令中不要写插值语法,直接写变量名称,
</div> //Vue只有在html标签中采用插值表单式
var vm=new Vue({
el:'#app',
data:{
msg:'nihao'
}
v-html
1.用法和v-text相似,但是它可以将html片段填充到标签中
2.可能有安全问题,一般只在可信任的内容上使用v-html,永不用在用户提交的内容上
3.它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行解析,但v-html会将其当html标签解析后输出。
<div id='app'>
<p v-html='html'></p> //输出,html标签在渲染时被解析 会在页面显示h1标题样式的内容
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
html:'<h1>nihao</h1>
}
v-pre
1.显示原始的信息跳过编译过程
2.跳过这个元素和它的子元素的编译过程
3.一些静态的内容不需要编译加这个指令可以加快渲染
<div id='app'>
<span v-pre>{{msg}}</span> //即使在data里面已经定义了msg标签,但是在这里仍然显示的{{msg}}
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'hello',
}
</script>
v-once
1.执行一次性的插值,当数据改变时,插值处的内容不会继续更新
<span v-once>{{ msg}}</span>
//即使data里面定义了msg,后期我们修改了,数据仍然显示的是第一次data里面缓存的数据
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
双向数据绑定
1.当数据发生变化的时候,视图也就跟着变化
2.当视图发生变化的时候,数据也会跟着同步变化
v-model
v-model是一个指令,只能限制在input,select textarea components中使用
<div id="app">
<div>{{msg}}</div>
<div>
当输入框中内容改变的时候, 页面上的msg 会自动更新
<input type="text" v-model='msg'>
</div>
</div>
指令还有很多,会慢慢列举的。