Vue.js 基础指令介绍
一、Vue 是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、Vue特点
简洁：页面由Html模板+Json数据+Vue实例组成</br>
数据驱动：自动计算属性和追踪依赖的模板表达式</br>
组件化：用可复用、解耦的组件来构造页面</br>
轻量：代码量小，不依赖其他库</br>
快速：精确有效批量DOM更新</br>
模板友好：可通过npm，bower等多种方式安装，很容易融入
三、Vue常用指令
<input type="text" v-model="msg"/>
{{msg}} <!--取数据-->
<div id="box">
<ul>
<!--ng-repeat-->
<li v-for="item in arr">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data(){
return{
arr:[
{"name":"xiaohong1","age":12},
{"name":"xiaohong2","age":13},
{"name":"xiaohong3","age":14},
{"name":"xiaohong4","age":15}
]
}
}
})
</script>
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
new Vue({
el: "#box",
data(){
return {
show: true //false
}
}
})
</script>
v-if 显示与隐藏 （dom元素的删除添加 个人理解）<br>
( 一般与 v-else、v-else-if 连用 )
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true //false
}
}
})
</script>
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true //false
}
}
})
</script>
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true //false
}
}
})
</script>
<div id="box">
<input type="text" v-bind:value="msg">
<a :href="link">点击</a>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg: "12222",
link:"v-model.html"
}
}
})
</script>
<div id="box">
<!-- v-on -->
<button v-on:click="say">按钮</button>
</div>
<script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(110);
}
}
})
</script>
v-text 读取文本 ( 不能读取html标签 )
<div id="box">
<div v-text="msg"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg:"12580"
}
},
methods: {
say() {
alert(111);
}
}
})
</script>
<div id="box">
<div v-html="msg"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg:"<h1>121212</h1>"
}
},
methods: {
say() {
}
}
})
</script>
<style>
.red {
background: red;
}
.blue {
width: 100px;
height: 100px;
background: blue;
}
</style>
<div id="box">
<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
<!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->
<!--三元运算符方式-->
<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
</div>
<script>
new Vue({
el: "#box",
data(){
return {
isred:false
}
}
})
</script>
v-style ( 与 v-class 用法大致一样 )
v-once 加载一次( 如果用到事件中就是事件只执行一次 )
<div id="box">
<div v-once>{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data(){
return{
msg:"Hello World !"
}
}
})
</script>
<div id="box">
<div v-cloak="">欢迎--{{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>
<div id="box">
<div v-pre>欢迎--{{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"12306"
}
}
})
</script>
四、总结
