Vue.js：用于构建用户界面的渐进式框架。
- vue基础语法
1.导入Vue.js:
(1)绝对路径导入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
(2)下载Vue.js相对路径导入 <script src="../js/vue.js"></script>
2.创建Vue实例：
var vue=new Vue({});
或 new Vue({});
3.vue数据绑定方式：双向数据绑定 (给实例化数据赋值会影响界面数据，修改界面值也会影响实例化值)
Eg: var data={
name:”张三”
};
var vm=new Vue({
data:data
});
修改data数据：
data.name=”李四”;
console.log(vm.name);//李四
vm.name=”王二”;
console.log(data.name);//王二
双向数据绑定原理原理
利用object.defineProperty()方法的set() get() 属性方法实现
var obj={name:””};
Object.defineProperty(obj,’name’,{
//对象 参数
set:function(value){
//为属性设置值
name=value;
}
get:function(){
//获取属性设置的值
console.log(name);
return name;
}
});
obj.name=”tom”;
console.log(obj.name);//tom
Object.freeze()阻止数据双向绑定 阻止修改现有属性的特性和值，并阻止添加新属性
返回值是传递给函数的对象。
4.使用vue的标志符进行数据区分 $
console.log(vm.$data===data);//true
区分vue实例里面的元素选择器 和js里面获取的元素是否一致
var vm=new Vue({
el:"#app" //el属性确认vue单页面程序的执行对象
});
console.log(vm.$el===document.getElementById("app"));//true*/
- watch:{属性:function(){}} 监听器 监听数据的变化 (只有数据有变化时有作用)
var em=new Vue({
el:”#app”,
data:{
name:”john”
},
watch:{
name:function(newvalue,oldvalue){
console.log(newvalue);
console.log(oldvalue);
}
}
});
6.生命周期钩子函数 created:function(){}
new Vue({
el:”#app”,
created:function(){
//在实例被创建后执行 也可以发送数据请求(ajax)
}
data:{
sex:”man”
},
watch:{
sex:function(){
console.log(this); //this=>sex
}
}
})
7.计算属性方法 computed:{属性:function(){}}
new Vue({
el: ”#app”,
data:{
msg:”123456”,
name:”lisi”
},
computed:{
//可以帮助快速进行逻辑运算，这个里面的方法不能被事件调用，只能用于{{}}中直接计算
msgData:function(){
return this.msg.split('').reverse().join('');
//return this.$data.msg;
},
showData:function(){
console.log(this.msg);
}
}
});
二、事件的绑定和调用
- v-on 事件监听 eg：<button v-on:click="greet()">你好</button>
methods:{名称：事件处理} 事件调用不回传参可以不加()
常用的事件修饰符 ：
<!-- 阻止单击事件继续传播 -->
<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>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
按键keyup修饰符：.enter .tab .delete (捕获“删除”和“退格”键) .esc
.space .up .down .left .right
还可以添加keycode值
2.事件的绑定方法还可以用@ eg:@click=”事件”
三、插值表达式及class style绑定
1.数据的绑定方式{{}} v-once指绑定一次性值，后期数据修改不会发生变化；
<span v-once>{{msg}}</span>
<input type="text" v-model="msg"/> <!--当添加了v-once msg将不会随input值得修改而变化-->
2.v-html指定内容以html方式绑定 将绑定内容解析为html语句 只显示其内容
<span>{{ele}}</span> <!--<span>html形式</span>-->
<span v-html="ele"></span> <!--html形式-->
3.v-bind 只能绑定特有的属性 缩写为 ：属性 不能绑定事件
<span>{{name}}</span>
<button v-bind:id="btnid" v-bind:disabled="isclick" @click="name='张三'">change</button>
<button :id="btnid" :disabled="isclick" @click="name='张三'">缩写change</button>
<button :id="btnid+id">动态修改id</button>
<!--disabled:true 禁用 false 可以点击-->
4.v-on 绑定事件 同一事件不同绑定方式操作数据 数据是互通的
<p>{{count}}</p>
<button v-on:click="count++">change</button>
<button @click="count++">@change</button>
5.{{}}中可以进行简单的表达式数据操作
<p>{{a+b}}</p>
<p>{{istrue?"Y":"N"}}</p>
<p>{{str.split("").reverse().join("")}}</p>
6. .class style 绑定
动态：v-bind:class="类名" ：class="[类名1，类名2，类名...]"
静态: v-bind:class="{类名：布尔标志}" @事件="布尔标志=取反"
<!--静态绑定-->
<span v-bind:class="classname"></span>
<span :class="[classname,size]"></span> <!--绑定多个-->
<!--动态绑定-->
<span :class="{spancolor:showcolor}"></span>
<button @click="showcolor=true">变化</button>
四、过滤器
Vue.filter('名称',function(){})
在创建 Vue 实例之前全局定义过滤器
或在一个组件的选项中定义本地的过滤器
调用时{{参数|过滤器}}
全局定义：
Vue.filter('tolower',function(value){
return value.toLowerCase();
});
局部定义：
new Vue({
el:"#app",
data:{ data：”” },
computed:{
//利用条件过滤数据显示
studentData:function(){
var that=this;
return this.stu.filter(function(value){ //对数组数据进行过滤 index value key
if(value.sex===that.sex){
return value;
}
})
}
}
})
五、自定义指令
自定义指令 Vue.directive('指令名称',{事件})
指令名称小写 使用时v-名称
全局指令注册 directive 局部directives
自定义指令可以指定钩子函数
Eg：
Vue.directive('ab',{
//当被绑定的元素插入到 DOM 中时执行 钩子函数
inserted: function (el) {
el.focus();
console.log(el.value);
},
/*bind 钩子函数 在当前指令绑定到元素的时候执行一次*/
bind:function(el){
console.log(el.value);
},
/*update 钩子函数 是在数据更新的时候开始执行*/
update:function(){
console.log(1);
}
});
六、组件
定义一个组件 Vue.component('组件名'，{组件执行的事件})
* Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。 传值
* prop 属性 驼峰命名 className class-name
* 静态 class-name 动态 ：class-name 获取data的变量值需要前面加：
* template 创建模板
* 局部注册 组件创建在实例化之前 无法传值？
* */
Eg:
//全局注册
Vue.component('tab-1',{
template:"<span>全局</span>"
});
//全局注册 动态传值
Vue.component('tab-2',{
props:['DataName','stuInfo'],
template:"<span>{{DataName}}{{stuInfo}}</span>"
});
//局部注册
var templates={
template:"<span>局部注册</span>"
};
new Vue({
el:"#tab",
data:{
msg:"大吉大利",
info:"今晚吃鸡"
},
components:{
"tab-3":templates
},
watch:{
msg:function(newvalue,oldvalue){
console.log(newvalue);
console.log(oldvalue);
}
}
});
- 路由 --需要导入路由库 类似于a链接
<script src="../js/vue-router.js"></script>
1.入口点
(1)静态 <router-link to="/page">入口</router-link>
(2)路由名称动态传值
<router-link :to="{name:'data',params:{id:10086}}">last</router-link>
2.出口点
<router-view>出口</router-view>
3.注册路由 router：router
3.配置路由对象 const router=new VueRouter({})
Eg:
const router=new VueRouter({
routes:[
//映射文件 入口
{
path:"/page", //路径
component:{ //组件
template:"<div><span>page</span>" + //不加子页面使用
"<router-link to='/page/pagechild/man'>child</router-link>" + //子页面传值
"<router-view></router-view></div>"
},
//配置路由的子界面
child:[
{
path:"pagechild/:sex",
component:{
template:"<span>pagechild{{$route.params.sex}}</span>"
}
}
]
},
{
//调用路由传值
path:"/last/:id", //路径
name:'data',
component:{
template:"<div>{{$route.params.id}}</div>"
}
}
]
});
new Vue({
el:"#app",
router: router //注册
})
八、流控制语句
/* v-if v-else-if v-else 类似于js分支语句 条件渲染*/
/*v-show 根据条件隐藏显示元素*/
<input type="text" v-model="show"/>
<p v-if="show==='a'">字母为：{{show}}</p>
<p v-else-if="show==='b'">字母为：{{show}}</p>
<p v-else-if="show==='c'">字母为：{{show}}</p>
<p v-else>字母为：no</p>
<span class="show" v-show="isshow"></span>
<button @click="isshow=true">change</button>
v-for指令根据一组数组的选项列表进行渲染 v-for="item in items" 显示：{{item.属性}}
* v-for添加给需要渲染的元素
* 可添加index key: v-for="(item,index,key) in items"
* v-for 通过一个对象的属性来迭代 v-for="item in object"
Eg:
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
<ul>
<li v-for="item in stu"> {{item.name+"-"+item.sex+"-"+item.age}}</li>
</ul>
<ul>
<li v-for="(item,index) in stu">{{item.name}}:{{index}} {{item.sex}}:{{index}}</li>
</ul>
<ul>
<li v-for="(key,item,index) in student">{{index}}:{{item}}:{{key}}</li>
</ul>
new Vue({
el:"#list",
data:{
items:[
{name:"tom"},
{name:"john"},
{name:"zhansan"}
],
stu:[
{name:"tom",sex:"man",age:"12"},
{name:"john",sex:"woman",age:"13"},
{name:"zhansan",sex:"man",age:"32"}
],
student:{name:"tom",sex:"man",age:"12"}
}
})
九、ajax 请求
*ajax 需引入vue-resource库
*利用方法绑定
* this.$http.post/get('url',{data}).then(function(res){成功请求后操作})
new Vue({
el:"#app",
methods:{
ajaxmothed:function(){
this.$http.post('./yufa.html',{
name: "zhangsa"
}).then(function (res) {
console.log(res);
});
}
},
computed:{
ajaxvue:function(){
this.$http.post('./yufa.html',{
name: "zhangsa"
}).then(function (res) {
console.log(res);
});
}
}
})