This is the first introduction to Vue. This is also the most basic content. I will share what I have learned. It mainly introduces the use of Vue and common instructions by referring to cdn. The second part will be an introduction to vue-cli, and the practice project will be shared later.
- Understanding of vue
Vue is a progressive javascript framework. The so-called progressive means that there are not too many restrictions, less requirements for users, and flexible and free use. In comparison, angular has many restrictions and requirements: you must use its module mechanism - you must use its dependency injection - you must use its special form to define components. And vue can use excellent libraries and frameworks, and can also be well integrated with other projects or frameworks.
The following is a very good understanding of progressive seen on the Internet, quote:
In my opinion, the meaning of progressive representation is: the least claim.
Each framework will inevitably have its own characteristics, which will have certain requirements for users. These requirements are propositions. There are strong and weak claims, and its strength will affect the way it is used in business development.
For example, Angular, which is mandatory in both versions, must accept the following if you use it:
- must use its module mechanism - must use its dependency injection - must use its special form to define components (this One point every view frame has, it is difficult to avoid)So Angular has a relatively strong exclusivity, and if your application is not starting from scratch, but constantly considering whether to integrate with other things, these propositions will bring some confusion.
For example, React, it also has a certain degree of assertion, its assertion is mainly the idea of functional programming, for example, you need to know what is a side effect, what is a pure function, and how to isolate side effects. It seems to be less intrusive than Angular, mainly because it is soft intrusion.
Vue may not be as good as React or Angular in some aspects, but it is progressive and has no strong proposition. You can use it to implement one or two components on top of the original large system, and use it as jQuery; you can also use it for the whole family. Bucket development, when used with Angular; you can also use its views to match the entire lower layer designed by yourself. You can use the concepts of OO and design patterns in the underlying data logic, or you can use functional methods. It's just a lightweight view. It only does what it should do, not what it shouldn't do. , that's all.
The meaning of progressive, as I understand it, is: not doing more than one's responsibilities.
- Referring to cdn: Open the official website to see how to introduce cdn.
- Summary of common instruction knowledge points
1. The structure after initializing the vue object:
// 实例化vue对象
var obj = new Vue({
el:"#vue-app", //el:element 需要获取的元素,一定是html中的根容器元素.
data:{ //data:用于数据的存储
},
methods:{ //methods:用于存储各种方法
},
computed:{
}
});2.v-html:
//HTML
<a v-bind:href="website">百度一下</a> //绑定跳转链接
<p v-html="websiteTag"></p> //a标签,注意这里直接{{websiteTag}}是不可以的
//script
data:{
website:"http://www.baidu.com",
websiteTag:"<a href='http://www.baidu.com'>百度</a>"
}3. v-bind: Bind the corresponding value to the property. Dynamically bind one or more attributes, or a component prop to an expression.
4.v-model: realize two-way binding of data
//HTML
<!--v-model已经实现input和name的双向数据绑定-->
<label>姓名:</label><input type="text" v-model="name">
<span>{{name}}</span>
<label>年龄:</label><input type="text" v-model="age">
<span>{{age}}</span>
<!--实现绑定的另一种方法,使用了$refs-->
//HTML
<label>姓名:</label><input type="text" v-on:keyup="logName" ref="name">
<span>{{name}}</span>
<label>年龄:</label><input type="text" v-on:keyup="logAge" ref="age">
<span>{{age}}</span>
//script
methods:{
logName:function(){
this.name = this.$refs.name.value;
},
logAge:function(){
this.age = this.$refs.age.value;
}
}
5.v-for: List rendering of arrays.
//HTML
<ul>
<li v-for="character in characters">{{character}}</li>
</ul>
<ul>
<!-- <li v-for="user in users">{{user.name}}:{{user.age}}</li> -->
<li v-for="(user,index) in users">{{index+1}}.{{user.name}}:{{user.age}}</li>
</ul>
//script
data:{
characters:["sw","ma","ed"],
users:[
{name:"tt",age:"20"},
{name:"dd",age:"22"},
{name:"wf",age:"21"}
]
}Extension: The dom structure displayed by the template does not have more divs, only h3 and p tags, and the first piece of code has more than divs, in fact, the performance is not good.
<div v-for="(user,index) in users">
<h3>{{index}}.{{user.name}}</h3>
<p>Age - {{user.age}}</p>
</div>
<template v-for="(user,index) in users">
<h3>{{index}}.{{user.name}}</h3>
<p>Age - {{user.age}}</p>
</template>6.v-show: It is a switch to display, the dom always exists, and it is displayed when the conditions are met, otherwise it is hidden.
7.v-if: The dom exists when it is displayed, and there is no dom if it is not displayed.
//error和success初始值都为false
<button @click="error=!error">Toggle Error</button>
<button @click="success=!success">Toggle Success</button>
<p v-if="error">网络链接错误:404</p>
<p v-else-if="success">网络链接成功:200</p>
<p v-show="error">网络链接错误:404</p>
<p v-show="success">网络链接成功:200</p>v-if screenshot:
v-show screenshot:
8. Event handling:
（1）v-on:click/@click:
//HTML
<button @click="add(1)">单击加一岁</button>
<button @click.once="add(1)">只能点一次加一岁</button>
<button v-on:click="substract(1)">单击减一岁</button>
<button @dblclick="add(5)">双击加五岁</button>
<button v-on:dblclick="substract(5)">双击减五岁</button>
<p>My age is {{old}}</p>
//script
new Vue({
el:"#vue-app",
data:{
old:22
},
methods:{
add:function(inc){
this.old += inc ; //使用data中的属性直接this.属性即可
},
substract:function(dec){
this.old -= dec;
}
}
})(2) v-on: mousemove and event modifiers:
//HTML
<!--实现移动鼠标获取x和y位置，显示在canvas内，移动到Stop Moving位置不变化效果 -->
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}} -
<!-- <span v-on:mousemove="stopMoving">Stop Moving</span> --> //调用方法阻止冒泡事件
<span v-on:mousemove.stop="">Stop Moving</span> //利用修饰符直接使用.stop达到同样效果
</div>
//效果：点击后执行alert方法，不跳转百度网页，如果没有prevent则先执行方法后跳转网页。
<a v-on:click.prevent="alert" href="http://www.baidu.com">百度</a>
//script
methods:{
updateXY:function(event){
// console.log(event)
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving:function(event){
event.stopPropagation();
},
alert:function(){
alert("hello");
}
}(3) Keyboard events:
//HTML
<!--按下enter才会执行logName方法 -->
<label>姓名:</label><input type="text" v-on:keyup.enter="logName">
<!--同时按下enter和alt才会执行logAge方法 -->
<label>年龄:</label><input type="text" v-on:keyup.alt.enter="logAge">
//script
methods:{
logName:function(){
console.log("正在输入名字...");
},
logAge:function(){
console.log("正在输入年龄...");
}
}9.Class and style binding: Whether the class is displayed or not depends on the following true and false.
<h4 v-bind:class="{red:true,blue:true}">示例１</h4>The result is rendered as follows:
Pass in multiple attributes to dynamically switch classes and set them in computed:
<h4>示例２</h4>
<button @click="changeColor=!changeColor">change color</button>
<button @click="changeLength=!changeLength">change length</button>
<div v-bind:class="compClasses">
<span>henry</span>
</div>computed:{
compClasses:function(){
return {
changeColor:this.changeColor,
changeLength:this.changeLength
}
}
} 
10. For the initialization of multiple instantiated objects, when modifying the properties of the first one, you can directly modify them in the second one.
//HTML 两个根容器
<div id="vue-app-one">
<h2>{{title}}</h2>
</div>
<div id="vue-app-two">
<h2>{{title}}</h2>
<button @click="changeTitle">修改app-one的标题</button>
</div>
//script 两次初始化，多个类似
var one = new Vue({
el:"#vue-app-one",
data:{
title:'这是app-one的内容'
},
methods:{
}
})
var two = new Vue({
el:"#vue-app-two",
data:{
title:'这是app-two的内容'
},
methods:{
changeTitle:function(){
one.title = "app-one的标题已经被改变了！"; //在第二个中修改第一个
}
}
})
two.title = 'app-two的标题也发生改变了！'; //修改app-two标题11.vue components:
//HTML
<h2>vue组件</h2>
<div id="vue-app-one">
<greeting></greeting>
</div>
<div id="vue-app-two">
<greeting></greeting>
</div>
//script
Vue.component("greeting",{
template:"<p>{{name}}:hello,介绍vue组件<button @click='changeName'>改名字</button></p>",
data:function(){
return {
name:'tt'
}
},
methods:{
changeName:function(){
this.name = 'henry';
}
}
})
new Vue({
el:"#vue-app-one"
})
new Vue({
el:"#vue-app-two"
}) 
After clicking: 
12. When {{method()}} calls a method, it cannot be recognized without (); when an event calls a method, it is not necessary to add (), and you need to add () to pass parameters.
13. Computed properties:
When there are multiple methods in the methods, the method will be executed when a button is clicked, which consumes a lot of money. At this time, computed can be used for large changes, time-consuming and a large number of searches. In fact, by operating the virtual dom, you can click on a certain method and only execute a certain method.
computed:
