1、Vue介绍
VSCode插件安装
后面开发Vue项目，使用.vue的单文件开发，就需要一些插件来帮我们识别.vue文件。插件安装在Extension中，点开即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。
VScode快捷键：https://segmentfault.com/a/1190000007688656
这里我们开发Vue推荐的几个插件：
jshint：js代码规范检查。
Beautify：一键美化代码的插件。
Vetur：.vue文件识别插件。
Javascript(ES6) code snippets：ES6语法提示。
Auto Rename Tag：自动重命名标签。标签都是成对出现的，开始标签修改了，结束标签也会跟着修改。
Auto Close Tag：自动闭合标签。针对一些非标准的标签，这个插件还是很有用的。
vue helper：一些Vue代码的快捷代码。
vscode-icons：可选。提供了很多类型的文件夹icon，不同类型的文件夹使用不同的icon，会让文件查找更直观。
open in browser：可选。右键可以选择在默认浏览器中打开当前网页。
Vue介绍
Vue(读音/vjuː/，类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！
Vue安装和使用
vue的安装大体上分成三种方式，第一种是通过script标签引用的，第二种是通过npm(node package manager)来安装，第三种是通过vue-cli命令行来安装。作为初学者，建议直接通过第一种方式来安装，把心思集中在vue的学习上，而不是安装上。
# 开发环境
<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>
基本使用
要使用Vue，首先需要创建一个Vue对象，并且在这个对象中传递el参数，el参数全称是element，用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数，data中的所有值都可以直接在根元素下使用{{}}来使用。示例代码如下：
<!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>
另外也可以在vue对象中添加methods，这个属性中专门用来存储自己的函数。methods中的函数也可以在模板中使用，并且在methods中的函数来访问data中的值，只需要通过this.属性名就可以访问到了，不需要额外加this.data.属性名来访问：
<!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模板语法
文本
在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。
<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>
如果在html的{{}}中，第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用v-once指令来实现。
<p v-once>{{username}}</p>
显示原生的HTML
有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现
<!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>
属性绑定
如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现，且属性是不需要在{{}}中的。
<!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>
