一 Vue官网
https://cn.vuejs.org/v2/guide/
二 实战代码
1 App.vue
// 模板
<template>
<!-- id 值 app表示挂载点 -->
<div id="app">
<!-- 待办事项功能 -->
<h1>待办事项功能</h1>
<div>
<input class="item" v-model="inputVaule" />
<!-- 绑定事件标准写法 -->
<button v-on:click="handleSubmit">待办事项</button>
<!-- 绑定事件简化写法 -->
<button @click="handleSubmit">待办事项</button>
</div>
<ul>
<!-- 使用组件，通过item和index设置组件属性，将数据传递给子组件，这也是一个在组件上使用v-for的例子 -->
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handDelete"
></todo-item>
</ul>
<!-- 和后端通信 -->
<h1>和后端通信</h1>
<div>
<button @click="handleSubmit1">提交</button>
<input v-model="dataInput1" />
<input v-model="list1" />
</div>
<!-- 数据显示 -->
<h1>数据显示</h1>
<!-- 第一种方式显示content -->
<div v-html="content"></div>
<!-- 第二种方式显示content -->
<div v-text="content"></div>
<!-- 第三种方式显示content：插值表达式 -->
<div>{{content}}</div>
<!-- 使用 JavaScript 表达式 -->
<div>{{ message.split('').reverse().join('') }}</div>
<!-- 属性绑定 -->
<h1>属性绑定</h1>
<!-- 属性绑定通用写法 v-bind -->
<div v-bind:title="title">属性绑定通用写法</div>
<!-- 属性绑定简化写法 : -->
<div :title="'echo:' + title">属性绑定简化写法</div>
<h1>双向绑定和单向绑定</h1>
<!--
双向绑定（v-model）：数据和页面显示相互绑定
单向绑定(value)：数据决定页面的显示，但页面决定不了数据的显示-->
<input v-model="content1" />
<!-- 双向绑定 -->
<p>{{content1}}</p>
<!-- 单向绑定 -->
<input :value="content2" />
<p>{{content2}}</p>
<!-- 计算属性和监听属性 -->
<h1>计算属性和监听属性</h1>
<div>
姓：
<input v-model="firstname" />
</div>
<div>
名：
<input v-model="lastname" />
</div>
<div>{{fullname}}</div>
<div>{{count}}</div>
<!-- 条件渲染 -->
<!-- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。-->
<h1>条件渲染</h1>
<!-- v-if是移除组件 -->
<div v-if="show">移除dom组件</div>
<!-- v-show是隐藏组件，推荐用v-show，可以提高性能 -->
<div v-show="show">通过css隐藏dom组件</div>
<button @click="hanleClick">toggle</button>
<!-- v-if 和v-else组合用法 -->
<div v-if="awesome">Vue is awesome!</div>
<div v-else>Oh no 😢</div>
<!-- 在 <template> 元素上使用 v-if 条件渲染分组F -->
<template v-if="ok">
<h5>Title</h5>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<!-- v-else-if用法 -->
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
<!-- 不用 key 管理可复用的元素 -->
logginType:
<input v-model="loginType" />
<br />
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" />
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" />
</template>
<!-- 用 key 管理可复用的元素 -->
<br />
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input" />
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input" />
</template>
<!-- 列表循环，v-for的使用 -->
<h1>列表循环，v-for的使用</h1>
<ul>
<!-- 数据循环展示用v-for，注意:循环中key不能重复，可以提示渲染性能 -->
<li v-for="(item,idx) of list3" :key="idx">item{{idx}}:{{item}}</li>
</ul>
<ul id="example-1">
<li v-for="item in items" :key="item.message">{{ item.message }}</li>
</ul>
<!-- 在 v-for 里使用对象,用 v-for 来遍历一个对象的 property -->
<!-- 三个参数分别为键值，键名，索引 -->
<ul id="v-for-object" class="demo">
<div v-for="(value, name, index) in object" :key="index">{{ index }}. {{ name }}: {{ value }}</div>
</ul>
<!-- 显示过滤/排序后的结果 -->
<li v-for="n in evenNumbers" :key="n">{{ n }}</li>
<!-- 嵌套 v-for 循环 -->
<ul v-for="(set,index) in sets" :key="index">
<li v-for="(n,index1) in even(set)" :key="index1">{{ n }}</li>
</ul>
<!-- 在 v-for 里使用值范围 -->
<div>
<span v-for="n in 10" :key="n">{{ n }}</span>
</div>
<!-- 在 <template> 上使用 v-for -->
<ul>
<template v-for="item in items1">{{ item }}</template>
</ul>
<!-- 监听事件 -->
<h1>监听事件</h1>
<!-- v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
-->
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<!-- 内联处理器中的方法 -->
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<!-- 在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
-->
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis"></div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat"></div>
<!-- 表单输入绑定 -->
<h1>表单输入绑定</h1>
<!-- 文本 -->
<input v-model="message3" placeholder="edit me" />
<p>Message is: {{ message3 }}</p>
<!-- 多行文本 -->
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message4 }}</p>
<br />
<textarea v-model="message4" placeholder="add multiple lines"></textarea>
<br />
<!-- 复选框 -->
<!-- 单个复选框，绑定到布尔值 -->
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
<!-- 多个复选框，绑定到同一个数组 -->
<div id="example-3">
<input type="checkbox" id="jack1" value="Jack" v-model="checkedNames" />
<label for="jack1">Jack</label>
<input type="checkbox" id="john1" value="John" v-model="checkedNames" />
<label for="john1">John</label>
<input type="checkbox" id="mike1" value="Mike" v-model="checkedNames" />
<label for="mike1">Mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>
<!-- 单选按钮 -->
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
<!-- 选择框 -->
<!-- 单选 -->
<div id="example-5">
<select v-model="selected">
<option disabled value>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<!-- 多选时，绑定到一个数组 -->
<div id="example-6">
<select v-model="selected1" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br />
<span>Selected: {{ selected1 }}</span>
</div>
<!-- 用 v-for 渲染的动态选项 -->
<br />
<select v-model="selected2">
<option
v-for="(option,index) in options"
:key="index"
v-bind:value="option.value"
>{{ option.text }}</option>
</select>
<span>Selected: {{ selected2 }}</span>
<!-- 值绑定 -->
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
</div>
</template>
// 脚本
<script>
import TodoItem from "./components/TodoItem";
import axios from "axios";
export default {
// 注册子组件组件
components: {
// 用todo-item标签去使用TodoItem这个组件
"todo-item": TodoItem
},
// 数据部分
data() {
return {
inputVaule: "",
list: [],
message: "how are you",
content: "<h1>hello</h1>",
title: "this is a title",
content1: "this is content1:双向绑定",
content2: "this is content:单向绑定",
firstname: "",
lastname: "",
count: 0,
show: true,
list1: ["green", "yellow", "red"],
dataInput1: "",
list2: [],
awesome: false,
ok: true,
type: "d",
loginType: "",
items: [{ message: "Foo" }, { message: "Bar" }],
list3: [1, 2, 3],
object: {
title: "How to do lists in Vue",
author: "Jane Doe",
publishedAt: "2016-04-10"
},
numbers: [1, 2, 3, 4, 5],
sets: [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10]
],
items1: ["item", "item1"],
counter: 0,
name: "how are you",
message3: "",
message4: "",
checked: true,
checkedNames: [],
picked: "",
selected: "",
selected1: [],
selected2: "A",
options: [
{ text: "One", value: "A" },
{ text: "Two", value: "B" },
{ text: "Three", value: "C" }
]
};
},
// 声明周期钩子以属性的方式进行声明
// 在实例初始化只有，数据观测（data obserber）和event/watcher时间配置之前被调用
beforeCreate: function() {
console.log("beforeCreate钩子");
},
// 在实例创建完成后被立即调用
// 这一步，实例已经完成以下的配置：数据观察（data obserber）,属性和方法的运算，watch/event事件回调
// 然而挂载阶段还没开始
created: function() {
// `this` 指向 vm 实例
console.log("create 钩子变化");
},
// 在挂载开始之前被调用，相关的渲染函数首次被调用
beforeMount: function() {
console.log("beforeMount 钩子");
},
// e1 被新创建的vm.$e1替换，挂载成功
mounted: function() {
console.log("mounted 钩子");
},
// 数据更新时调用
beforeUpdate: function() {
console.log("beforeUpdate 钩子");
},
// 组件DOM已经更新，组件更新完毕
updated: function() {
console.log("updated");
},
// 定义方法的地方
methods: {
// 第一种形式的方法定义
handleSubmit() {
this.list.push(this.inputVaule);
this.inputVaule = "";
},
handDelete(index) {
this.list.splice(index, 1);
},
// 第二种形式的方法定义
hanleClick: function() {
this.show = !this.show;
},
handleSubmit1() {
axios
.get(
"http://localhost:8005/diff/obj/list?pipelineId=1&productFamilyId=1&objectName=1"
)
// then指成功之后的回调
.then(response => {
console.log(response);
console.log(response.data);
this.dataInput1 = response.data.msg;
this.list2 = response.data;
})
.catch(function(error) {
console.log(error);
});
},
even: function(numbers) {
return numbers.filter(function(number) {
return number % 2 === 0;
});
},
greet: function(event) {
// `this` 在方法里指向当前 Vue 实例
alert("Hello " + this.name + "!");
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName);
}
},
say: function(message) {
alert(message);
},
warn: function(message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault();
}
alert(message);
}
},
// 计算属性
computed: {
// 依赖属性发生变化才会重新计算，当firstname或lastname发送变化时才重新计算fullname
// 方法中变量变化决定了计算属性的变化
fullname: function() {
return this.firstname + " " + this.lastname;
},
evenNumbers: function() {
return this.numbers.filter(function(number) {
return number % 2 === 0;
});
}
},
// 监听器，当某个数据发生变化，触发监听器函数执行
// 监听变量的变化，决定了方法的执行
watch: {
// firstname: function(){
// this.count++
// },
// lastname: function(){
// this.count++
// }
// 监听计算属性的变化，当fullname发送变化时，触发函数执行
fullname: function() {
this.count++;
}
}
};
</script>
// 样式
<style>
</style>
2 TodoItem.vue
// 子组件
<template>
<li class="item" @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ["content", "index"],
methods: {
handleDelete() {
this.$emit("delete", this.index);
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item {
color: green;
}
</style>
三 参考
https://gitee.com/cakin24/vuedemo
来源：oschina
链接：https://my.oschina.net/u/4373202/blog/4262093