【含示例】Vue.js快速入门
—初学的同时做记录，如果理解有错误请师傅们及时指正
—整理了菜鸟教程和Vue官网的教程，并加入了自己的理解，更好理解
—文章中的示例是教程中或自己写的例子，读者师傅也可以按照自己的理解尝试写自己的例子
—没有cnpm的师傅可以先百度：cnpm下载
目录
- 什么是Vue.js
-
- helloworld
- Vue.js下载安装
- Vue正式入门
-
- Vue基础语法
-
- 插入值
- 过滤器
- 与用户交互
- 条件语句
- 循环语句
- 方法和计算属性
- 监听器
- Vue组件（HTML函数）
- 自定义Vue指令
- Vue实现Ajax
- 结语
什么是Vue.js
Vue.js是一套用来构建用户界面的框架，通过一些简单的操作就可以实现一些复杂的功能
可以用来做前后端分离、优化前端代码这样的工作
helloworld
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>Vuejs Hello world</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{
{
name}} said {
{
message}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'Vue.js',
message: 'HelloWorld!'
}
})
</script>
</body>
</html>
读者师傅可以将这个helloworld复制粘贴到本地的HTML文本中，此后的例子只需要更改body标签中的内容即可
Vue.js下载安装
可以直接在代码里用script标签引用，也可以下载到本地
正经开发项目的话，可以用cnpm下载下来：cnpm install vue
还有一个命令行工具用来快速搭建单页的应用
cnpm install --global vue-cli
vue init webpack test-project
然后一路默认回车，等待片刻，就可以进入并运行这个应用了：
cd test-project
cnpm run dev
Vue正式入门
Vue应用都需要实例化Vue类，如以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="v1">
<h1>site : {
{
site}}</h1>
<h1>url : {
{
url}}</h1>
<h1>{
{
details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#v1',
data: {
site: "Hausa_'s blog",
url: "http://hausa.vip/",
},
methods: {
details: function() {
return this.site + ": Talk is cheap show me the code!";
}
}
})
</script>
</body>
</html>
script中的el即是HTML中div的ID，意味着这个对象只操作id='v1'代码块中的内容
data用于定义变量的值，methods用于定义函数，返回值也可以是个字符串
比如需要获取191班的学生列表，就可以用methods向SpringBoot请求，并将返回结果渲染到页面上
Vue基础语法
插入值
最基本的插入值包括插入文本和插入HTML代码
其中插入文本的方式就像上面的例子一样，用{ { value }}来实现
插入HTML代码需要用v-html指令，如：
<div id="app">
<div v-html="msg"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'this is a html header
'
}
})
</script>
插入其他属性要用v-bind实现，如：
v-bind:title 鼠标移上的显示
v-bind:src 绑定图片路径
v-bind:html 绑定HTML文本和标签
v-bind:text 绑定文本
v-bind:class 绑定类样式
v-bind:style 动态绑定样式
v-bind:class如下代码：可以通过在Vue中设置use的真假来决定消息是否靠右
<style>
.right{
float:right;}
</style>
<div id="app">
<div v-bind:class="{'right': use}">
I can move!
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
v-bind:href如下代码：可以实现随意更换URL链接：
<div id="app">
<a v-bind:href="url">可变链接</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.hausa.vip'
}
})
</script>
过滤器
Vue.js提供过滤器，用来对字符串等进行分析操作，使用管道符分割，允许多层嵌套，函数中传入的value即为前面传入的message：
<div id="app">
{
{
message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hausa_'
},
filters: {
capitalize: function (value) {
if (!value) return 'null'
return 'value is: ' + value
}
}
})
</script>
与用户交互
在Vue中使用v-model属性来实现双向数据绑定，即与用户的交互
以下例子获取用户的输入并进行显示：
<div id="app">
<p>{
{
message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
同样的属性还有v-on，例如v-on:click，下面的例子每点一下按钮数字会加1：
<div id="app">
<div>
<p>{
{
value}}</p>
<input type="button" value="点我试试" v-on:click="{
{value+=1}}">
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
value: 1
}
});
</script>
以上以v-开头的属性也被称为指令，其他指令会在后面学到
条件语句
v-if、vi-else-if、v-else是Vue的条件语句，
一个简单的例子如下，这个例子根据用户的输入决定显示哪个DIV块：
<div id="app">
<input type="input" v-model="user_input">
<div v-if="user_input < 10">
小于10
</div>
<div v-else-if="user_input <50">
大于10，小于50
</div>
<div v-else>
大于50
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
user_input: 15
}
})
</script>
循环语句
循环使用v-for指令，需要用num in nums这样的语法，如下面的例子将依次输出1，2，3：
<div id="app">
<p v-for="num in nums">
{
{
num.n }}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
nums: [{
n: 1 },{
n: 2 },{
n: 3 }]
}
})
</script>
方法和计算属性
Vue的优点之一是让模板文件一目了然易于维护，而当一些复杂逻辑出现时，全部写在模板里会让人很费解，所以设计了方法和计算属性。方法在之前已有例子，在methods中声明即可，下面介绍一个计算属性的例子，这个例子将用户的输入反转并显示：
<div id="app">
<input v-model="input">
<p>{
{
reversedoutput }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
input: 'Hausa'
},
computed: {
reversedoutput: function () {
return this.input.split('').reverse().join('')
}
}
})
</script>
监听器
监听器顾名思义用来监听用户的操作并做出响应，这里我们在上面的v-on:click功能的基础上实现一个显示操作，使用监听器将允许进行更多更通用的操作，也适用于进行一些异步操作，Vue使用watch()做监听器：
<div id = "app">
<p>{
{
counter }}</p>
<p>点击了：{
{
num}}次</p>
<button @click = "counter++">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1,
num:0
}
});
vm.$watch('counter', function(nval, oval) {
vm.num++
});
</script>
Vue组件（HTML函数）
可以将Vue组件理解成：Vue为HTML扩展的函数功能，它通过封装一些HTML和js代码，来创造新的HTML标签，如下例子实现一个可以指定初始值，并实时将用户输入显示的“HTML函数”：
<div id="show-input">
<show-input default_="Hausa_ " message_="han"></show-input>
<show-input default_="hello " message_="world"></show-input>
<show-input default_="nothing " message_="to write"></show-input>
</div>
<script>
Vue.component('show-input', {
props:['default_','message_'],
data: function () {
return {
input: this.default_ + this.message_
}
},
template: '{
{input}}
'
})
new Vue({
el: '#show-input' })
</script>
其中props指定了函数可以接受的参数；data必须用函数返回值的方式指定，不然多个组件中的data将会互相影响。效果：
自定义Vue指令
除了Vue本身规定的指令外，它也允许开发者自定义指令，以下例子用于实现页面加载完成时自动让输入框获得焦点：
<div id="app">
<input v-focus>
</div>
<script>
new Vue({
el: '#app',
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
})
</script>
Vue实现Ajax
Vue2.0中借助axios实现Ajax请求，axios可以用script标签引入：，也可以下载后引入，也可以用cnpm安装：cnpm install axios
实现GET请求的例子如下：
<div id="app">
<h1>网站列表</h1>
<div v-for="site in info" >
{
{
site }}
</div>
</div>
<script type = "text/javascript">
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://www.runoob.com/try/ajax/json_demo.json')
.then(response => (this.info = response.data.sites))
.catch(function (error) {
// 请求失败处理
console.log(error);
});
}
})
</script>
POST请求，指定参数：
axios.post('/user', {
firstName: 'Hausa', // 参数 firstName
lastName: 'han' // 参数 lastName
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
结语
这里只是一些基础内容，大概能进行简单应用的开发，如果需要了解更细更深的内容，可以前去Vuejs的官网：https://cn.vuejs.org/ -> 学习 查阅详细的文档。
以上，共勉