学习资源--Vue2官网
Vue2停更后，发现官网原来的学习路径变成英文了，所以找到了中文简介进行学习：
简介 | Vue.js https://cn.vuejs.org/guide/introduction
一、模板语法
1.1 文本插值、html插值、属性和使用限制
在about组件中写测试代码。不废话，直接上代码。
javascript
<template>
<div class="about">
<h1>This is an about page</h1>
{{ msg }}
<div v-html="htmTxt"></div>
<div v-bind:id="id" >百度</div>
<div :id="id" >百度</div>
<p>{{ count + 1 }}</p>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
msg: '<h2>静态文本</h2>',
htmTxt:'<h2>静态文本</h2>',
id: '1234',
attr: 'test-id',
count: 0,
}
},
components: {
}
}
</script>使用限制：
1、插值仅限于表达式。
2、关于缩写，当属性和属性名称相同时，比如 属性id，属性名称id，可以写成 :id, Vue2不支持。
1.2 简单的事件，用于测试语法
javascript
<template>
<div class="about">
<h1>This is an about page</h1>
{{ msg }}
<div v-html="htmTxt"></div>
<div v-bind:id="id" >百度1</div>
<div :id="id" >百度2</div>
<div :testid = "testid">动态属性绑定</div>
<p>{{ count + 1 }}</p>
<p @click="myclick()">事件测试</p>
</div>
</template>
<script>
export default
{
name: 'HomeView',
data() {
return {
msg: '<h2>静态文本</h2>',
htmTxt:'<h2>静态文本</h2>',
id: '1234',
testid: 'testid',
count: 0,
}
},
methods:
{
myclick() {
this.count += 1;
console.log('点击事件');
var s = document.getElementById("1234").innerHTML;
alert(s)
}
},
components: {
}
}
</script>1.3 指令：v-if、v-else、v-show
使用这几个指令控制dom显示，代码:
javascript
<template>
<div class="about">
<h1>This is an about page</h1>
{{ msg }}
<div v-html="htmTxt"></div>
<div v-bind:id="id" >百度1</div>
<div :id="id" >百度2</div>
<div :testid = "testid">动态属性绑定</div>
<p>{{ count + 1 }}</p>
<p @click="myclick()">控制Dom显示</p>
<div v-if="count % 2 == 0">count是偶数</div>
<div v-else>count是奇数</div>
<div v-show="count % 2 == 0">v-show:count是偶数时显示</div>
</div>
</template>
<script>
export default
{
name: 'HomeView',
data() {
return {
msg: '<h2>静态文本</h2>',
htmTxt:'<h2>静态文本</h2>',
id: '1234',
testid: 'testid',
count: 0,
}
},
methods:
{
myclick() {
console.log('点击事件');
var s = document.getElementById("1234").innerHTML;
alert(s)
this.count += 1;
}
},
components: {
}
}
</script>心得：
1、v-if 和 v-show都实现了dom元素的渲染控制，他们的差别是：v-if 是真正控制了dom内容的输出，即dom中有就显示没有就不显示；而v-show是通过display:none来控制元素的显示的。
2、<div v-if>模块如果使用 <template v-if >来替换，可以消除本身模块在dom中的占位。
1.4 指令：v-for
html
<template>
<div class="about">
<h1>This is an about page</h1>
<ul>
<li v-for="student in students" :key="student.idx">
{{ student.idx }} - {{ student.name }} - {{ student.age }}岁
</li>
</ul>
</div>
</template>
<script>
export default
{
name: 'HomeView',
data() {
return {
students: [
{idx:'1', name: '张三', age: 18 },
{idx:'2', name: '李四', age: 19 },
{idx:'3', name: '王五', age: 20 }
]
}
},
components: {
}
}
</script>1.5 指令 v-mode
绑定表单数据。
javascript
<template>
<div class="about">
<h1>This is an about page</h1>
<ul>
<li v-for="student in students" :key="student.idx">
{{ student.idx }} - {{ student.name }} - {{ student.age }}岁
</li>
</ul>
<button @click="$router.push('/')">Go to Home</button>
<input type="text" v-model.lazy="students[0].name" placeholder="修改第一个学生的名字"/>
<input type="number" v-model.number="students[0].age" placeholder="修改第一个学生的年龄"/>
<div>
<span>第一个学生的信息：</span>
<span>{{ students[0].idx }} - {{ students[0].name }} - {{ students[0].age }}岁</span>
</div>
<button @click="students.push({idx: students.length + 1 + '', name: '新学生', age: 18})">添加新学生</button>
</div>
</template>
<script>
export default
{
name: 'HomeView',
data() {
return {
students: [
{idx:'1', name: '张三', age: 18 },
{idx:'2', name: '李四', age: 19 },
{idx:'3', name: '王五', age: 20 }
]
}
},
methods: {
},
components: {
}
}
</script>心得：
1、v-mode与绑定的数据是同步更新的。为了让数据在事件后更新，使用v-mode.lazy。
2、修饰符有三个：.lazy、number、trim。
1.6 方法（methods）、计算属性（computed）和侦听器（watch）
javascript
<template>
<div class="about">
<h1>This is an about page</h1>
<h3>价格计算</h3>
单价：<input type="number" v-model.number="price" placeholder="输入价格"/>
数量：<input type="number" v-model.number="quantity" placeholder="输入数量"/>
<button @click="price = 1; quantity = 1;">reset</button>
<div>
<span>总价：</span>
<span>函数计算：{{ getSum()}}</span> <span>计算属性{{ calcSum }}</span>
</div>
</div>
</template>
<script>
export default
{
name: 'HomeView',
data() {
return {
price: 1,
quantity: 1,
}
},
methods: {
getSum() {
return this.price * this.quantity;
}
},
computed: {
calcSum() {
return this.price * this.quantity;
}
},
watch: {
price(newVal, oldVal) {
console.log(`price changed from ${oldVal} to ${newVal}`);
},
},
components: {
}
}
</script>心得：
1、插值表达式、函数计算和计算属性都可以。计算属性的优点：当数据没有发生变化时，不会重新计算。
1.7 v-bind 之 class与style绑定
html
<template>
<div class="about">
<h1>This is an about page</h1>
<h3>价格计算</h3>
单价：<input type="number" v-model.number="price" placeholder="输入价格"/>
数量：<input type="number" v-model.number="quantity" placeholder="输入数量"/>
<button @click="price = 1; quantity = 1;">reset</button>
<div>
<span>总价：</span>
<span>函数计算：{{ getSum()}}</span> <span>计算属性{{ calcSum }}</span>
</div>
<div><span>绑定样式</span><br/>
<div :class="{ active: price > 5 }">
价格大于5元时显示红色，否则显示绿色
</div>
</div>
</div>
</template>
<script>
export default
{
name: 'HomeView',
data() {
return {
active: 'active',
price: 1,
quantity: 1,
}
},
methods: {
getSum() {
return this.price * this.quantity;
}
},
computed: {
calcSum() {
return this.price * this.quantity;
}
},
watch: {
price(newVal, oldVal) {
console.log(`price changed from ${oldVal} to ${newVal}`);
},
},
components: {
}
}
</script>心得：
可以绑定对象、数组、数组对象。