vue初体验
vue初体验
hello vue
<body>
<div id="box">
<h1>hello {{name}}</h1>
</div>
<script>
let box = new Vue({
el: '#box',
data: {
name: 'vue'
}
});
</script>
上述代码中，首先创建了一个Vue对象实例，接着定义了属性及属性值
- el：选择绑定的html元素
- data：属性及属性值
vue是响应式的，所以当在控制台改变data里的属性值时，html标签的mustache语法也会随之改变
第一个for
<body>
<div id="app">
<h1>hello {{name}}</h1>
<h2 v-for="value in movies">{{value}}</h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
name: 'world',
movies: ['星际穿越', '千与千寻', '哈利波特', '志明与春娇']
}
});
</script>
</body>
上诉代码中，h2中插入了一个v-for函数，这是一个循环函数，这个函数还有很多用法，后续会提到
因为vue的响应式，在浏览器控制台在数组中push()数据页面也会同步更新
绑定事件
<body>
<div id="app">
<h1>当前数字：{{num}}</h1>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
add: function() {
this.num++;
},
sub: function() {
this.num--;
}
}
});
</script>
</body>
上诉代码中，两个按钮分别绑定了两个函数，两个函数操纵的数值是在vue中定义的num变量，每次按下按钮都会对数值进行操作，因为vue的响应式，所以html中的数值也会随之变化
插值语句
- v-once
通过插入该指令，可以使指令对应的标签的数值只显示一次，即使数值改变，标签内的mustache语法也不会更改
- v-html
当需要在元素中插入html代码时，如果直接使用mustache语法，插入的将会直接是string字符串，因此需要插入该指令
- v-text
该指令与mustache语法类似，都是在标签内插入数据，只不过这个指令会将标签内原先的数据全部清空
- v-pre
该指令会使标签内的语法按照原来的形式输出
- v-cloak
该指令会在vue还来不及渲染元素时，会将元素隐藏
示例
<body>
<div id="app"e v-cloak>
<h1 v-onc>hello {{num}}</h1>
<button v-on:click="add">+</button>
<h2 v-html="url"></h2>
<h1 v-text="num"></h1>
<h1 v-pre>hello {{num}}</h1>
</div>
<script>
setTimeout(function () {
let app = new Vue({
el: '#app',
data: {
num: 100,
url: '<a href="www.baidu.com">baidu</a>'
},
methods: {
add: function () {
this.num++;
}
}
});
},1000);
</script>
</body>
v-bind和v-on
v-bind可以用于绑定一个或多个属性值，或者向另一个组件传递props值（学到组件时会再深入）
v-bind可以绑定图片连接，超链接，以及一些类和样式等
同时，v-bind还可以使用语法糖（简写）：来表示
例如：
<body>
<div id="app">
<h1>hello {{name}}</h1>
<a v-bind:href="url">baidu</a>
<img :src="pic" alt="hello world">
</div>
<script>
let app = new Vue({
el: '#app',
data: {
name: 'world',
url: 'https://www.baidu.com',
pic: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
}
});
</script>
</body>
v-bind也可绑定一个对象，对象的属性为类名，属性值为布尔值，表示这个类是否存在
同时，v-bind也可以绑定数组，数组元素为类名
v-bind绑定为style时，也可绑定一个对象，属性为css属性，属性值为css属性值
同时，v-bind此时也可绑定为数组，元素值为css属性名+属性值
例如：
<body>
<div id="app">
<h1>hello {{name}}</h1>
<h2 :class="{red: isActive, bgc_blue: notActive}">hello vue</h2>
<h2 :class="[red, 'bgc_blue']">hello you</h2>
<h2 :style="{color: 'pink', backgroundColor: 'skyblue'}">hello me</h2>
<h2 :style="[fontSize]">hello kitty</h2>
<button @click="btn_change">改变类</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
name: 'world',
isActive: true,
notActive: false,
red: 'red',
fontSize: {fontSize: '20px'}
},
methods: {
btn_change: function() {
this.isActive = !this.isActive;
this.notActive = !this.notActive;
}
}
});
</script>
</body>
v-on修饰符
vue提供了一些修饰符来方便的处理一些事件
.stop：阻止冒泡.prevent：阻止默认行为.keyCode|keyAlias：键修饰符.native：监听组件根元素的原生事件.once：只触发一次回调
例：
<body>
<div id="app">
<div class="father" @click='showFather'>
<!-- 阻止冒泡 -->
<div class="son" @click.stop='showSon'></div>
<!-- 串联修饰符 -->
<a href="https://www.baidu.com" @click.prevent.stop='showSon'>百度</a>
</div>
<!-- 阻止默认行为 -->
<a href="https://www.baidu.com" @click.prevent>百度</a>
<!-- 键修饰符：键别名 -->
<input type="text" @keyup.enter='showSon'>
<!-- 键修饰符：键代码 -->
<input type="text" @keyup.13='showFather'>
<!-- 只触发一次回调 -->
<button @click.once='showSon'>touch me</button>
</div>
<script>
let app = new Vue({
el: '#app',
methods: {
showSon() {
console.log('son');
},
showFather() {
console.log('father');
}
}
});
</script>
</body>
计算属性
vue中提供的计算属性：computed
这个属性看起来和方法类似，主要是用于在里面定义一些需要计算的值，比如计算定义书本的总价格
<body>
<div id="app">
<h1 v-for="value in books">书名：{{value.name}} 单价：{{value.price}}</h1>
<!-- <h1>总价:{{cacul_books()}}</h1>
<h1>总价:{{cacul_books()}}</h1>
<h1>总价:{{cacul_books()}}</h1> -->
<h1>总价:{{cacul_books}}</h1>
<h1>总价:{{cacul_books}}</h1>
<h1>总价:{{cacul_books}}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
books: [
{id: 14332, name: '深入理解计算机系统', price: 29.9},
{id: 14333, name: 'JavaScript学习指南', price: 19.9},
{id: 14334, name: 'css权威指南', price: 59.9},
{id: 14336, name: '你不知道的JavaScript', price: 9.9}
]
},
// methods: {
// cacul_books: function() {
// let total_price = 0;
// for (let index = 0; index < this.books.length; index++) {
// let price = this.books[index].price;
// total_price += price;
// }
// console.log('cacul_books()');
// return total_price;
// }
// },
computed: {
cacul_books: function() {
let total_price = 0;
for (let index = 0; index < this.books.length; index++) {
let price = this.books[index].price;
total_price += price;
}
console.log('cacul_books');
return total_price;
}
}
});
</script>
</body>
在上述代码中，在computed属性中定义了一个方法，看起来和methods属性相似，实则有以下不同
- 如果多次调用computed属性方法，在data值没有改变的情况下，无论在mustache语法中调用了多少次computed，computed都只执行了一次。而methods方法只要调用它，它便会执行。
- computed的属性实际上是每个属性包含了两个方法，一个get方法，一个set方法，因此computed的属性严格来说并不是方法，所以在调用是不能以方法来调用。
方法
methods定义时可分为3种情况
- 事件调用的方法没有参数需要传递，这个时候可以省略括号
- 事件传递一个参数，这个时候如果传递一个参数，则正常调用参数；如果不传递参数，也就是省略了括号，这时vue会将浏览器生产的event事件作为参数传递
- 事件传递多个参数，如果不传递参数，则默认第一个参数为浏览器生产的event事件，第二个参数为undefined；如果要指定参数为浏览器生产的event事件，则定义为$event
<body>
<div id="app">
<button @click="btnclick1">按钮1</button>
<button @click="btnclick1()">按钮1</button>
<button @click="btnclick2">按钮2</button>
<button @click="btnclick2()">按钮2</button>
<button @click="btnclick2(123)">按钮2</button>
<button @click="btnclick3">按钮3</button>
<button @click="btnclick3()">按钮3</button>
<button @click="btnclick3(123, 321)">按钮3</button>
<button @click="btnclick3(123, $event)">按钮3</button>
</div>
<script>
let app = new Vue({
el: '#app',
methods: {
btnclick1() {
console.log('btnclick1');
},
btnclick2(event) {
console.log(event);
},
btnclick3(value, event) {
console.log(value);
console.log(event);
}
}
});
</script>
</body>
v-for
v-for可以进行数组或者对象的遍历
对于数组，可以设置两个参数，分别是索引和值
对于对象，可以设置三个参数，分别是对象名，对象值和索引值
v-for中也建议为每个v-for绑定一个key值，这样可以提高渲染的效率
<body>
<div id="app">
<ul>
<li v-for="(value, index) in movies">value:{{value}} index:{{index}}</li>
</ul>
<ol>
<li v-for="(value, key, index) in songs">value:{{value}} key:{{key}} index:{{index}}</li>
</ol>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['星际穿越', '千与千寻', '赏金猎手', '三傻大闹宝莱坞'],
songs: {
song: 'red',
singer: 'taylor swift'
}
}
});
</script>
</body>
v-if
v-if，v-else以及v-else-if，使用方法和JavaScript相差不大
v-if在进行渲染时不会将元素渲染在html中，v-show则是会将元素渲染出来，然后使用display属性进行隐藏
vue渲染元素时为了高效，会尽可能的复用已使用的DOM元素，因此在input切换时可能会出现里面的值不会改变的情况，这时就需要使用key关键字来唯一识别，使之不复用元素
<body>
<div id="app">
<div class="box" v-if="isActive">
<label for="">输入邮箱</label>
<input type="text" placeholder="输入邮箱" key="email">
</div>
<div class="box" v-else>
<label for="">输入手机号</label>
<input type="text" placeholder="输入手机号" key="phone">
</div>
<button @click="changeBtn()">切换</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isActive: true
},
methods: {
changeBtn() {
this.isActive = !this.isActive;
}
}
});
</script>
</body>
v-model
v-model可以对表单元素与data进行双向绑定，表单元素的值会跟着data属性进行改变，通常会设置每个表单元素一个value属性，这样在表单元素被选中时，data的值也会随之发生更改。
在复选框的绑定中，若只设置了一个值，则该值可设置为true或者false，这常常用于勾选用户协议中
<body>
<div id="app">
<input type="text" v-model="message">
<h1>当前输入：{{message}}</h1>
<label for="male">男</label>
<input type="radio" id="male" value="male" v-model="sex">
<label for="female">女</label>
<input type="radio" id="female" value="female" v-model="sex">
<h1>当前选中: {{sex}}</h1>
<label for="getTure"></label>
<input type="checkbox" id="getTure" value="isTure" v-model="getTure">
<h1>当前状态：{{getTure}}</h1>
<label for="apple">苹果</label>
<input type="checkbox" id="apple" value="apple" v-model="fruits">
<label for="apple">香蕉</label>
<input type="checkbox" id="banana" value="banana" v-model="fruits">
<label for="apple">橙子</label>
<input type="checkbox" id="orange" value="orange" v-model="fruits">
<label for="apple">梨</label>
<input type="checkbox" id="paris" value="paris" v-model="fruits">
<h1>当前选中：{{fruits}}</h1>
<select id="hobby" v-model="hobby">
<option value="run">跑步</option>
<option value="jump">跳绳</option>
<option value="kiss">亲吻</option>
</select>
<h1>当前选择：{{hobby}}</h1>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello world',
sex: 'male',
getTure: true,
fruits: ['apple', 'paris'],
hobby: 'run'
}
});
</script>
</body>
修饰符：
修饰符在v-model后面添加，如v-model.lazy="msg"
lazy：添加后事件在change时才会触发
number：将输入值转化为数字类型
trim：过滤首尾的空格字符
