Vue的基本指令功能和使用方式汇总
Vue的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">{{ message }}</div>
</body>
<script src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message: "Hello, World!",
list: [11,12,13,14]
}
})
</script>
</html>
通过元素创建Vue对象
- el：Vue对象指定的元素范围
- data: Vue对象关联的数据源
- {{XXX}}：通过这种方式在html中显示Vue对象数据
v-text & v-html
<p v-text="message"></p>
<p v-html="message"></p>
- v-text="xxx"基本等同{{xxx}},区别在于xxx渲染完后，v-text才会显示，但是{{}}会一开始就显示
- v-html表示在标签里插入的是html语句
- v-text类似jQuery中的.text("xxx")；v-html类似jQuery中的.html("xxx")
v-for
<div id="app">
<ul>
<li v-for="item in sortedItems">{{item}}</li>
</ul>
<hr>
<ul>
<li v-for="(student, index) in students">{{index+1}}、{{student.name}} - {{student.age}}</li>
</ul>
</div>
</body>
<script src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
items:[23, 53, 14, 54, 4, 28],
students:[
{name: "Sue", age: 17},
{name: "Nick", age: 12},
{name: "Ann", age: 13},
{name: "Jhon", age: 18}
]
},
computed:{
sortedItems: function () {
return this.items.sort(function (a, b) {
return a-b
});
}
}
});
</script>
- computed:表示计算属性。根data使用方式一样
- (item, index) in list的方式可以同时获取元素以及下标
- v-for:语句用在需要重复的元素上。在这里，需要重复的是li元素，所以，v-for是在li标签上使用的
v-if & v-else & v-show
<div id="app">
<div v-if="isLogin">Hello, {{ userName }}</div>
<div v-else><button>请登录</button></div>
<div v-show="isShow">test v-show</div>
</div>
</body>
<script src="../assets/js/vue.js"></script>
<script>
app = new Vue({
el: "#app",
data:{
isLogin: true,
userName: "Sue",
isShow: false
}
})
</script>
- v-if可以和v-else配对，配对方式见以上代码
- v-if也可以单独使用，根v-show功能一样
- v-if如果为真，就显示v-if标签中的内容，否则，显示其配对的v-else标签中内容
v-model
<div id="app">
<p>展示绑定信息：{{message}}end</p>
<h3>双向绑定</h3>
<div>
<p>测试v-model 信息绑定：<input type="text" v-model="message"></p>
<p>测试v-model.lazy 信息绑定：<input type="text" v-model.lazy="message"></p>
<p>测试v-model.number 信息绑定：<input type="text" v-model.number="message"></p>
<p>测试v-model.trim 信息绑定：<input type="text" v-model.trim="message"></p>
</div>
<hr>
<h3>文本输入</h3>
<div>
<textarea cols="60" rows="10<p>" v-model="message"></textarea>
</div>
<hr>
<h3>多选框绑定布尔值</h3>
<div>
<p><input type="checkbox" v-model="isTrue">isTrue</p>
<p>{{isTrue}}</p>
</div>
<hr>
<h3>多选框绑定数组</h3>
<div>
<p><input type="checkbox" value="sue" v-model="webnames">Sue</p>
<p><input type="checkbox" value="jack" v-model="webnames">Jack</p>
<p><input type="checkbox" value="king" v-model="webnames">King</p>
<p>{{webnames}}</p>
</div>
<hr>
<h3>单选框绑定</h3>
<div>
<p><input type="radio" value="man" v-model="sex">男</p>
<p><input type="radio" value="felman" v-model="sex">女</p>
<p>你所选择的是{{sex}}</p>
</div>
<hr>
</div>
</body>
<script src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message: "Are you OK?",
isTrue: true,
webnames: [],
sex:''
},
methods: {
}
})
</script>
- v-model="数据源",即可完成数据绑定
- v-model绑定的对象可以是字符串，布尔值，数组等
- .lazy指的是，输入完成，输入框失去焦点后，信息同步
- .number在用户输入的首内容为数字时起作用，此时后面输入的非数字内容就不能完成同步，输入框失去焦点时，清空后面的非数字内容
- .trim作用为去除输入框前面和后面的空格
v-on
<div id="app">
<p>本场比赛得分: <span v-text="count"></span></p>
<div>
<button v-on:click="add">加分</button>
<button @click="remove">减分</button>
<input type="number" v-model="interval" v-on:keyup.enter="add1">
</div>
</div>
</body>
<script src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
count: 0,
interval: 1
},
methods: {
add: function(){
this.count += 1;
},
remove: function(){
this.count -= 1;
},
add1: function(){
this.count += parseInt(this.interval);
}
}
})
</script>
- v-on:完成事件触发绑定Vue对象中的方法
- @click是v-on:click的简写
- v-on可以绑定到键盘上任意一个输入键的键盘操作事件，这个需要知道键盘上相应该键的键值
v-bind
<div id="app">
<div>
<p><img v-bind:src="imgSrc" width="100%"></p>
<p><a :href="jumpUrl">微博</a></p>
</div>
<hr>
<div>
<ul>
<ol :class="ca">绑定class</ol>
<ol :class="{A:isOk}">绑定class判断</ol>
<ol :class="[ca, cb]">绑定class数组</ol>
<ol :class="isOk?ca:cb">三目运算符绑定class</ol>
</ul>
</div>
<hr>
<input type="checkbox" v-model="isOk">
<label>isOK: {{isOk}}</label>
<hr>
<div :style="{color:myColor, fontSize:myFont}">关于style的绑定</div>
<div :style="styleObj">绑定style对象</div>
</div>
</body>
<script src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
imgSrc:"https://wx3.sinaimg.cn/mw690/c260f7ably1fu94bvbb66j20v90kmk21.jpg",
jumpUrl:"https://weibo.com/3261134763/GuAl4neVP?ref=feedsdk",
ca: "A",
cb: "B",
isOk: false,
myColor: 'green',
myFont: '30px',
styleObj: {color:'purple', fontSize: '40px'}
}
})
</script>
- v-bind:指的是标签属性绑定
- :属性名 是 v-bind:属性名 的简写
v-pre & v-cloak & v-once
<div id="app">
<div v-pre>{{message}} v-pre表示原样输出</div>
<div v-cloak><p>渲染完成后，才显示{{message}}</p>
</div>
<hr>
<div>
<div v-once>{{message}}</div>
<div><input type="text" v-model="message"></div>
<div>{{message}}</div>
</div>
</div>
</body>
<script src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message: "Hello, Sue!",
}
})
</script>
- v-pre：原样输出
- v-cloak:渲染完成后，再显示元素
- v-once:只渲染一次。适合用于内容修改功能，需要同时显示原内容，和修改后内容
