常用指令
文本插值 v-html：把文本解析为 HTML 代码。绑定属性 v-bind：为 HTML 标签绑定属性值。条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。v-else：条件性的渲染。 v-else-if：条件性的渲染。v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。 列表渲染 v-for：列表渲染，遍历容器的元素或者对象的属性。事件绑定 v-on：为 HTML 标签绑定事件。表单绑定 v-model：在表单元素上创建双向数据绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<style>
.my {
border: 1px solid red;
}
</style>
<body>
<div id="div">
<!-- 文本插值 v-html-->
<div>{{msg}}</div>
<div v-html="msg"></div><!-- 操作文本会解析标签 -->
<!-- 绑定属性 v-bind可省略-->
<div><a v-bind:href="url" :class="cls">百度一下</a></div>
<!-- 条件渲染 v-if/v-show-->
<div v-if="num%3==0">div1</div>
<div v-else-if="num%3==1">div2</div>
<div v-else="num%3==2">div3</div>
<div v-show="flag">div4</div>
<div v-if="isLogin">个人中心</div>
<div v-else="!isLogin"><span>注册</span> <sapn>登录</sapn>
</div>
<!-- 列表渲染 v-for-->
<ul>
<li v-for="name in names">
{{name}}
</li>
<li v-for="value in student">
{{value}}
</li>
</ul>
<!-- 事件绑定 v-on/@-->
<div>{{name}}</div>
<button v-on:click="change()">改变div的内容</button>
<button v-on:dblclick="change()">改变div的内容</button>
<button @click="change()">改变div的内容</button>
<!-- 表单绑定 v-model 双向绑定-->
<form autocomplete="off">
姓名：<input type="text" name="username" v-model="username">
<br>
年龄：<input type="number" name="age" v-model="age">
</form>
<button @click="getUserName()">test</button>
</div>
</body>
<script>
new Vue({
el: "#div",//指定接管的区域
data: {
msg: "<b>hello Vue</b>",
cls: "my",
url: "http://www.baidu.com",
num: 1,
flag: true,
isLogin: false,
names: ["zhangsan", "lisi", "wangwu"],
student: {name: "tianqi", age: 18},
name: "改变前的div",
username:"张三",
age:18
},
methods: {
//方法的简写
change() {
this.name="改变后的div";
},
getUserName: function () {
console.log(this.username)
}
}
})
</script>
</html>
自定义组件
组件其实就是自定义的标签。例如 就是对的封装。本质上，组件是带有一个名字且可复用的 Vue 实例。
定义格式
Vue.component(组件名称, {
props:组件的属性,
data: 组件的数据函数,
template: 组件解析的标签模板
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="div">
<student myname="zhangsan" age="18" gender="male"></student>
</div>
</body>
<script>
Vue.component("student", {
props: ["myname", "age", "gender"],
template: `<div><div>{{myname}}</div><div>{{age}}</div><div>{{gender}}</div></div>`,
data: function () {
return {
myname: "cls"
}
}
});
new Vue({
el:"#div"
});
</script>
</html>
生命周期
生命周期的八个阶段
beforeCreate 创建前created 创建后beforeMount 载入前mounted 载入后beforeUpdate 更新前updated 更新后beforeDestroy 销毁前destroyed 销毁后
生命周期方法（钩子函数）
created（vue实列创建完成，页面还没有加载也没有解析）
mounted（此时的功能是完成模板的解析）
updated
destroyed
...
axios
在 Vue 中发送异步请求，本质上还是 AJAX。可以使用 axios 这个插件来简化操作！使用步骤
引入 axios 核心 js 文件。调用 axios 对象的方法来发起异步请求。调用 axios 对象的方法来处理响应的数据。 axios 常用方法
方法名作用
get(请求的资源路径与请求的参数)发起GET方式请求post(请求的资源路径,请求的参数)发起POST方式请求then(response)请求成功后的回调函数，通过response获取响应的数据catch(error)请求失败后的回调函数，通过error获取错误信息
get请求
axios.get("userServlet?"+"username=" + this.username + "&password=" + this.password)
.then(resp=>this.respData = resp.data)
.catch(function (err) {alert("操作失败");});}
axios.get("userServlet",
{params:{username:this.username, password:this.password}})
.then(resp=>{this.respData=resp.data})
.catch(function (err) {alert("操作失败");});
post请求
axios.post("userServlet", "username=" + this.username + "&password=" + this.password)
.then(resp => {this.respData = resp.data;})
.catch(resp =>{alert(resp.data);});
箭头函数特点：函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
.then(resp=>{alert(this)})//this就是Vue对象
.then(function () {alert(this);});// [object Window]
vue中的获取元素
this.$refs["元素名称"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<input type="text" ref="add"/>
<button @click="insert">添加</button>
</div>
</body>
<script>
new Vue({
el: "#app",
methods:{
insert:function(){
// this.$refs.add.value = "test";
this.$refs['add'].value = "test";
}
}
})
</script>
</html>
过滤器范例
Vue.filter("dateFilter", function(date, formatPattern){
return moment(date).format(formatPattern || "YYYY-MM-DD HH:mm:ss");
// || 后的值为未指定形参formatPatterrn时的默认值
});
{{item | dateFilter('HH:mm')}} //调用
