1, Vue Introduction
VSCode plug-in installed
behind the development Vue project, developed using .vue single file, you need some plugins to help us identify .vue file. Extension plug-in installed, the point to open to see a search button, you can enter a keyword search you want plug-ins.
VScode shortcut: https: //segmentfault.com/a/1190000007688656
Here we recommend the development of several Vue plug-ins:
jshint: js check code specifications.
Beautify: a key to beautify the plug-in code.
Vetur: .vue file identification plug.
Javascript (ES6) code snippets: ES6 grammar tips.
Auto Rename Tag: Automatically rename label. Tags are appearing in pairs, modify the start tag, end tag will follow the changes.
Auto Close Tag: automatic closing tag. For some non-standard tags, this plug-in is still very useful.
vue helper: Some quick codes Vue code.
vscode-icons: Optional. It provides many types of folders icon, different types of folders using a different icon, make file search more intuitive.
open in browser: Optional. Right you can choose to open the current page in your default browser.
Introduction Vue
Vue (pronunciation / vjuː /, similar to the view) is a framework for building separate front and rear ends. The beginning is a good domestic players, especially Rain Creek developed, now the world's popular front-end framework. Vue development web is very simple to use, and improve the technical environment, community activists, before and after the end of the necessary skills to find a job!
Vue installation and use
vue mounting broadly divided three ways, the first one is referenced by a script tag , the second is mounted by npm (node package manager), by vue-cli third command line to install . As a beginner, it is recommended to install directly via the first approach, focused his mind on vue learning, rather than on the installation.
# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
# 或者是下载代码保存到本地
<script src="lib/vue.js"></script>
# 生产环境，使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
Basic use
To use Vue, Vue first need to create an object and pass parameters in this object el, el parameter stands for element, used to find a root element to render vue. And we can pass a parameter data, all the data values can be used directly in the root element {} {} used. Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码"
}
})
</script>
Further methods may also be added in vue object, this property designed to store own functions. The function methods can also be used in the template, and function in the methods of accessing data in value, you only need to access to the property by this name, no extra this.data attribute names to access.:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码"
},
methods:{
// demo:function(name){
// return "晚上好， " + this.username + "*****"+name
//
// }
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
2, Vue template syntax
Text
in html by {} {} (curly brackets) may Vue inserting data into a web page object. Vue and as long as the corresponding object value is changed, then the value of the html bis braces will immediately change.
<div id="app">
<p>{{username}}</p>
<button v-on:click="change">点击修改</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "xxx"
},
methods: {
change: function(){
this.username = 'China';
}
}
});
</script>
If in the html {{}}, the first time rendering is complete, do not want to follow the post-change data and change, you can use the v-once instructions.
<p v-once>{{username}}</p>
Display HTML native
Sometimes our Vue object, or background html code returned to us a native segment, we need to render, then if direct rendering by {}, as will the html code string. This time we can be realized by v-html instructions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
<p v-html="code">{{code}}</p>
<div v-html="code">{{code}}</div>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码",
"code":"<a href='https://www.baidu.com'>百度</a>"
},
methods:{
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
Attribute binding
if we want to bind our Vue object variables on the properties of the html element, then the need to achieve through v-bind, and the property is not required in the {{}}.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
<p v-html="code">{{code}}</p>
<div v-html="code">{{code}}</div>
<img v-bind:src="image" alt="">
<!-- 属性是不需要在{{}}中的-->
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码",
"code":"<a href='https://www.baidu.com'>百度</a>",
"image":"https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png"
},
methods:{
// demo:function(name){
// return "晚上好， " + this.username + "*****"+name
//
// }
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
