一、Vue基础
Vue.js是一个响应式数据驱动的JavaScript框架，可以简化Dom操作。Vue.js的官方网页在https://cn.vuejs.org
我们使用Vue.js需要在<script>中导入资源，可以分为两种
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
我们首先实现一个HelloWorld的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue.js</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue.js"
}
})
</script>
</body>
</html>
在<body>项中有三个部分，最中间的<script>部分导入了Vue.js的资源，上面的部分用来显示message的信息，下面的部分来定义一个Vue应用，并对message进行赋值，具体的代码在接下来会详细介绍。
el是一个挂载点，通过CSS选择器设置vue实例管理的元素。在挂载完毕后，el命中的元素，就会被data中同名的数据替换。Vue实例的作用域是在el命中的元素内部，即使嵌套也可以。
同样地，我们使用#app是为了命中外部的id=“app”，我们也可以使用class=“app”，这样需要修改el:".app"，也可以直接使用标签选择器el:“div”，但在实际开发中，还是建议直接使用id选择器，因为一般开发的时候，要求id是唯一的，而类和标签选择器都有可能是不唯一的。我们也可以在其他的标签中使用，例如p或者h2等等；但要注意vue无法挂载到<html>和<body>上。
data部分定义了要置换的数据内容。data中可以不止有字符串，也可以定义其他的复杂对象
<script>
var app = new Vue({
el:"#app",
data:{
school:{
name:"NEU",
location:"沈阳"
},
campus:["南湖校区","浑南校区"]
}
}
})
</script>
Vue.js会直接打印对象的内容
我们也可以通过school.name的方式来获取属性值。
二、Vue指令
在这一部分我们来介绍Vue指令
1. v-text
v-text指令用来在标签中添加文字，
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2 v-text="message + '!'"></h2>
<h2>我想写的是{{message + "!"}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello V-text"
}
})
</script>
</body>
我们可以看到，代码中依旧有el挂载点和data。我们可以选择在标签中直接添加v-text属性，或者直接使用嵌套的花括号。第二种的好处是可以直接在花括号周围添加其他字符。我们还可以使用字符连接来添加字符，注意在第一种方式中，我们只能在双引号中使用单引号。
2. v-html
v-html可以设置标签的inner-html。
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p v-html="content"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>Go Baidu</a>"
}
})
</script>
</body>
v-html指令也可以讲文字打印在网页中，和v-text完全相同。唯一的区别在于，如果在data中赋值的字符串是HTML的结构的话，其内容就会被解析并加载。例如上面的代码中，网页中会有Go Baidu的链接，点击即可跳转到百度搜索的界面。
3. v-on
v-on指令可以为某一元素添加事件。
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="事件绑定" v-on:click="doIt">
<input type="button" value="事件绑定" v-on:mouseenter="doIt">
<input type="button" value="事件绑定" v-on:dbclick="doIt">
<input type="button" value="事件绑定" @dbclick="doIt">
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(){
// TODO
}
}
})
</script>
</body>
我们直接在对应的元素上添加v-on来添加事件，也可以直接通过@来添加事件。当我们想要更改页面中元素的值，我们可以通过this关键字来访问
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2> {{message}} </h2>
<input type="button" value="点我" @click="addInfo">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
food:"番茄炒蛋"
},
methods:{
addInfo:function(){
this.message += "好好吃!";
}
}
})
</script>
</body>
4. v-show
v-show指令可以根据表达式的真假，让元素显示或者隐藏。常见的效果比如广告或者遮罩层等等。
<div id="app">
<img src = "vue.jfif" v-show="isShow">
<button @click="vanish">点我让图片消失</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
vanish:function(){
this.isShow = false;
}
}
})
</script>
按钮会在单击事件触发的情况下执行vanish函数，vanish函数会将isShow变量设置为false，因此图片就会消失了。条件表达式也可以通过引用data中的变量来进行判断，并决定是否要显示图片。
5. v-if
v-if指令也是通过表达式的真假来切换元素的显示和隐藏，但是该指令是直接操纵dom元素。
<div id="app">
<p v-if="isShow">我是一个p标签</p>
<button @click="vanish">消失</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
vanish:function(){
this.isShow = false;
}
}
})
</script>
我们可以看到v-if的使用方法和v-show没有什么差别。实际上每次修改显示的时候，v-show修改的是元素的样式，而v-if会直接将元素从DOM树中删除，显示的时候再添加回来，修改的是元素。
6. v-bind
v-bind指令可以修改元素的属性
<div id="app">
<img v-bind:src = "imgSrc">
<img v-bind:title = "imgTitle + '!!!!'">
<img v-bind:class = "isActive?'active':''">
<img v-bind:class = "{active:isActive}">
<img :class = "{active:isActive}">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"vue.jfif",
imgTitle:"Hello V-Bind",
isActive:false
}
})
</script>
v-bind指令让属性读取data中的变量，变量中可以进行字符串连接，也可以做简单的判断；判断的方式可以使用三元表达式，也可以使用对象的方式。v-bind有简写的方式，可以去掉v-bind，直接在属性前添加冒号。
7. v-for
v-for可以生成要显示的表格
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index+1}} - {{item}}
</li>
<li v-for="(item,index) in objArr">
{{index+1}} - {{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["A","B","C","D","E"],
objArr:[
{name:"Jack"},
{name:"Rose"}
]
}
})
</script>
在表格元素中添加v-for属性，并赋值字符串，字符串中第一个变量是每次循环的变量，可以修改名字，in是关键字，in后的是要遍历的数组。我们还可以获取每次遍历的索引，需要注意的是，遍历的元素和索引要用括号括起来，并且元素在前面，索引在后面。数组中也可以是对象，使用的时候直接访问内部的属性即可。
8. v-on补充
传递自定义参数，事件修饰符
<div id="app">
<input type="text" @keyup.enter="sayHi"/>
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
sayHi:function(){
alert("Hello");
}
}
})
</script>
我们可以通过.操作符来访问事件更多的修饰符，上面的例子是只有点击回车才可以触发事件，更多的事件修饰符可以查看官网
9. v-model
获取和设置表单元素的值(双向数据绑定)
<div id="app">
<input type="text" v-model="message">
<h2> {{message}} </h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello V-model"
}
})
</script>
当对表单元素添加v-model属性后，需要将data中的一个遍历与表单元素进行绑定，两者之一发生的改变都会引起另一方的改变，因此叫做双向数据绑定。
三、网络编程
在这一部分，我们学习axios网络请求库，并如何把它和vue结合在一起
1. axios基础
在使用之前，我们需要导入axios的资源
<script src = "https://unpkg.com/axios/dist/axios.min.js"></script>
axios通过get方法来获取请求，get方法会返回一个Promise对象，我们使用then来添加回调函数。回调函数需要两个，第一个是成功的回调函数，第二个是异常的回调函数。
axios.get("url?查询字符串").then(function(response){}, function(err){})
同样，axios也有post方法
axios.post("url",{key1:value1,key2:value2}).then(function(response){}, function(err){})
2. axios + vue.js
我们可以把axios的get和post方法写在vue.js的methods中
var app = new Vue({
el:"app",
data:{
joke:"笑话"
},
methods:{
getJokes:function(){
var that = this;
axios.get("url").then(function(response){
that.joke = response.data;
}.function(err){});
}
}
})
需要注意的是axios中的this会改变，无法访问到data中的数据，因此我们使用一个变量先将this存储下来。
四、vue-cli
Vue-cli是快速构建Vue.js项目的一套命令行工具。
1. vue-cli安装
vue-cli需要node.js，且版本大于6，最好是8。还需要版本大于3的npm和Git。
我们在配置好node.js后，直接输入以下指令即可完成vue-cli的安装
npm install -g vue-cli
2. 创建vue-cli项目
我们可以在终端中修改路径到目标文件夹，之后输入以下指令
vue init webpack hello
webpack指定的是打包的方式，hello是项目的名称。再按下回车后，会出现一系列交互，在修改后可以按回车确认
- 项目名称
- 项目描述
- 项目作者
- Vue Build
- 安装Vue-Router
- 是否使用EsLint
- 是否设置单元测试
- 是否用NightWatch设置e2e测试
- 是否在项目创建后运行npm install
如果你不知道如何设置的话，直接回车选择默认值即可。当看到Project initialization finished即代表初始化完成。
3. 项目结构
我们来查看一下项目中生成的文件结构
hello // 项目名称
-build // 用来使用Webpack打包使用Build依赖
-config // 用来做项目配置
-node_modules // 用来管理项目中使用的依赖
-src // 存储Vue.js的代码[重点]
assets // 存放静态资源[重点]
components // 存放Vue组件[重点]
router // 配置项目路由[重点]
App.vue // 项目中根组件[重点]
main.js // 项目中主入口[重点]
-static // 其他静态文件
- babelrc // 将es6语法转为es5运行
- editorconfig // 项目编辑配置
- gitignore // git忽略文件
- postcssrc.js // css兼容性处理
- index.html // 项目主页
- package.json // 依赖管理，类似于Maven的pom.xml，使用命令，不建议手动修改
- package-lock.json // 对package.json的加锁文件
- README.md // 说明文件
4. 运行项目
要运行项目，则切换到项目根目录下，并直接输入
npm start dev
启动后，通过返回的URL即可访问网页，默认端口为8081。
启动后默认显示的是App.vue下的代码，可以在template的div中看到代码中使用<router-view/>加载了路由，加载的是Components下的HelloWorld.vue的内容。
5. 开发方式
Vue-cli的重点在src文件夹下，在vue-cli中，一切皆组件。在一个组件中，只有js代码、html代码和css。Vue-cli中是开发组件来对应每个业务模块，日后可以将多个业务组件组合到一起形成一个前端系统。日后在使用Vue-cli开发时，不再新建html文件，而是编写vue组件，在之后打包时，vue-cli会将组件编译成运行的html文件。
main.js是前端的入口，在这里定义了App，并且挂载在index.html中。但是Vue.js并不建议我们直接在这里添加组件，而是在components下开发我们自己的组件，并通过路由来从主页访问我们的组件。路由在router文件夹下的index.js文件中，我们通过在该文件的routes中添加组件信息来实现路由访问。
参考资料
[1] 前端基础必会教程-4小时带你快速入门vue
[2] Vue脚手架的实战教程，已完结
欢迎加入交流群QQ1107710098
