vue指令
v-if & v-else 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">可以看到</p>
<p v-else>请登录</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
seen: false
},
// template:`
// `,
methods:{
},
});
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vxoXcZK5-1616401152338)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210322105443646.png)]
v-for指令
对数组进行排序 ，，，对数组对象进行排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--对数据进行排序 ，遍历的是新的变量 -->
<li v-for="l in sortitem">{
{l}}</li>
</ul>
<br>
<ul>
<li v-for="(i,index) in sortlist">{
{index+1}}:{
{i.name}}--{
{i.age}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
item: [
13, 24, 32, 45, 7
],
list: [{
name: 'ayan',
age: 14
},
{
name: 'achao',
age: 19
},
{
name: 'ahao',
age: 4
},
{
name: 'ayun',
age: 94
}
]
},
computed: {
sortitem: function () {
//重新声明一个变量
return this.item.sort(sortNumber); //对列表进行排序
},
sortlist: function () {
//重新声明一个变量
return sortByKey(this.list,'age')
}
},
methods: {
},
});
function sortNumber(a, b) {
return a - b;
}
//数组对象方法排序:
function sortByKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
</script>
</body>
</html>
v-text 和 v-html指令
我们已经会在html中输出data中的值了，我们已经用的是{ {xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴
露我们的{ {xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲
染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<span>{
{message}}</span>=<span v-text="message"></span><br>
<span v-html="dodo"></span>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
message: 'hello',
dodo:'<h2>hello</h2>'
},
methods:{
},
});
</script>
</body>
</html>
v-on指令
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
使用绑定事件监听器，编写一个加分减分的程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
本场比赛得分：{
{score}}
<p>
<input type="text" v-on:keyup.enter="onEnter" v-model="score1">
<button v-on:click="add">加分</button>
<button v-on:click="deletes">减分</button>
<br>
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 0,
score1: 2,
},
methods: {
add() {
this.score++
},
deletes() {
this.score--
},
onEnter() {
this.score = this.score + parseInt(this.score1);
}
},
});
</script>
</body>
</html>
我们的v-on 还有一种简单的写法，就是用@代替。
我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。 绑定事件写法：
<input type="text" v-on:keyup.enter="onEnter" v-model="score1">
javascript代码：
onEnter() {
this.score = this.score + parseInt(this.score1);
}
因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。
v-model指令
v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
<p>文本框</p>
<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>
修饰符
.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。
文本域绑定数据
<p>文本域</p>
<textarea id="" cols="30" rows="10" v-model="message"></textarea>
多选框绑定一个值
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{
{isTrue}}</label>
多选框绑定数组
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="ayan" value="ayan" v-model="web_names">
<label for='isTrue'>ayan</label>
<input type="checkbox" id="achao" value="achao" v-model="web_names">
<label for='isTrue'>achao</label>
<input type="checkbox" id="ayun" value="ayun" v-model="web_names">
<label for='isTrue'>ayun</label>
</p>
<p>{
{web_names}}</p>
单选按钮绑定
<h3>单选按钮绑定</h3>
<p>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="two">女</label>
<p>你选择的性别是：{
{sex}}</p>
</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<p>原始文本信息：{
{message}}</p>
<p>文本框</p>
<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>
<hr>
<p>文本域</p>
<textarea id="" cols="30" rows="10" v-model="message"></textarea>
<hr>
<h3>多选框绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{
{isTrue}}</label>
<hr>
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="ayan" value="ayan" v-model="web_names">
<label for='isTrue'>ayan</label>
<input type="checkbox" id="achao" value="achao" v-model="web_names">
<label for='isTrue'>achao</label>
<input type="checkbox" id="ayun" value="ayun" v-model="web_names">
<label for='isTrue'>ayun</label>
</p>
<p>{
{web_names}}</p>
<hr>
<h3>单选按钮绑定</h3>
<p>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="two">女</label>
<p>你选择的性别是：{
{sex}}</p>
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello',
isTrue: true,
web_names: [
],
sex: '男'
},
methods: {
},
});
</script>
</body>
</html>
v-bind指令
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
html文件：
<img v-bind:src="srcUrl" width="200">
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。
js文件：
var app=new Vue({
el:'#app',
data:{
srcUrl: '../vue2.0/7.jpg',
}
})
v-bind缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
绑定css样式
在工作中我们经常使用v-bind来绑定css样式：
1、绑定Class
<div :class="className">1、绑定Class</div>
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
<div :class="{classA:isOk}">2、绑定Class中的判断</div>
3、绑定class中的数组
<div :class="[classA,classB]">3、绑定Class中的数组</div>
4、绑定class中使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定Class中的三元运算符</div>
5、绑定style
<div :style="{
color:red,fontSize:font}">5、绑定style</div>
6、用对象绑定style样式
<div :style="styleObject">6、对象绑定style</div>
var app=new Vue({
el:'#app',
data:{
styleObject: {
color: 'yellow',
fontSize: '40px'
}
})
v-pre & v-cloak & v-once
v-pre ：原样输出
<p v-pre>{
{message}}</p>
v-cloak: 渲染完成后，才显示！
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
<p v-cloak>渲染完成后，才显示！</p>
v-once：只渲染一次
<div v-once >{
{message}}</div>