vue.js入门及内部指令
什么是vue.js
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。
核心（MVVM）
MVVM模式（Model-View-ViewModel）
实例化vue
<div id="app">{{message}}</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'欢迎你小菜鸟'
}
})
</script>
vue 基本指令
插值 ｛｛msg｝｝
v-if
v-if用来判断是否加载html的DOM
v-else 一般情况下与v-if 与 v-show 联用
v-show:
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
- v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
- v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-for
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法
对象输出：
结果：
v-text
我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}
<span>{{ message }}</span> = <span v-text="message"></span> <!--v-text相当于innerText-->
v-htm
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
<span v-html="message"></span> <!--v-html相当于innerHTML-->
data:{ message:"<h1>还迎小菜鸟</h1>" }
需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
v-on
html
v-on 还有一种简单的写法，就是用@代替。
<button @click="add">+</button>
v-bind
v-bind是处理HTML中的标签属性的
<div id="app"> <p><img v-bind:src="imgSrc" alt=""></p></div>
<p><a :href="sjdUrl" target="_blank">网站</a></p>
<div :class="className">1、绑定classA</div>
<div :class="{classA:isOk}">2绑定classA并进行判断</div>
<div :class="[classA,classB]">3绑定classA并进行判断</div>
<div :style="{color:red,fontSize:font}">5、绑定style</div>
<div :style="styleobj">绑定对象</div>
var app = new Vue({
el:'#app',
data:{
imgSrc:'./../assets/img/1.png' , //绑定img 并赋值
sjdUrl:'http://www.sjd1118.icoc.cc/', //绑定并赋值
className:'classA', //绑定class 必须有style
isOk:false, //绑定判断
classA:'classA', //绑定数组
classB:'classB',
red:'blue', //绑定style
font:'12px',
styleobj:{
color:'green', //绑定对象
fontSize:'30px'
}
}
})
v-pre
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<span v-pre>{{msg}}</span>
v-cloak
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
|
1
2
3
|
[v-cloak] {
display: none;
}
|
|
2
3
|
<div v-cloak>
{{ message }}
</div>
|
v-once
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<span v-once>{{msg}}</span>
v-model
数据双向绑定
<div id="app1">
<div>
<h3>{{msg}}</h3>
<p><input type="text" v-model="msg"/></p>
<p><input type="text" v-model.lazy="msg"/></p> //取代 imput 监听 change 事件。 懒事件改变后生效
<p><input type="text" v-model.number="msg"/></p> // 只有开始输入数字才生效
<p><input type="text" v-model.trim="msg"/></p> // 去掉头和尾部的空格
<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="" v-model="isTrue" />
<label for="sjd">{{isTrue}}</label>
<h3>多选按钮绑定一组值</h3>
<input type="checkbox" id="s" value="sjd" v-model="names"/>
<label for="s">sjd</label>
<input type="checkbox" id="j" value="007" v-model="names"/>
<label for="j">007</label>
<p>{{names}}</p>
<h3>单选按钮绑定数据</h3>
<input type="radio" name="" id="" value="男" v-model="sex" />
<label for="">男</label>
<input type="radio" name="" id="" value="女" v-model="sex" />
<label for="">女</label>
<p>{{sex}}</p>
</div>
var vn = new Vue({
el:"#app1",
data:{
msg:"nihao",
isTrue:false,
names:[],
sex:""
}
})
过滤器
这样就能输出message的大写了,过滤器也能串联在一起使用:
{{message | reverse | uppercase}}
这里reverse并不是内建的过滤器，我们可以用Vue.filter自定义:
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
浙公网安备 33010602011771号