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：你好
methods:{名称：事件处理} 事件调用不回传参可以不加()
常用的事件修饰符 ：
按键keyup修饰符：.enter .tab .delete (捕获“删除”和“退格”键) .esc
.space .up .down .left .right
还可以添加keycode值
2.事件的绑定方法还可以用@ eg:@click=”事件”
三、插值表达式及class style绑定
1.数据的绑定方式{{}} v-once指绑定一次性值，后期数据修改不会发生变化；
{{msg}}
2.v-html指定内容以html方式绑定 将绑定内容解析为html语句 只显示其内容
{{ele}}
3.v-bind 只能绑定特有的属性 缩写为 ：属性 不能绑定事件
{{name}}
<button v-bind:id=“btnid” v-bind:disabled=“isclick” @click=“name=‘张三’”>change
<button :id=“btnid” :disabled=“isclick” @click=“name=‘张三’”>缩写change
动态修改id
4.v-on 绑定事件 同一事件不同绑定方式操作数据 数据是互通的
{{count}}
change
<button @click=“count++”>@change
5.{{}}中可以进行简单的表达式数据操作
{{a+b}}
{{istrue?"Y":"N"}}
{{str.split("").reverse().join("")}}
-
.class style 绑定
动态：v-bind:class=“类名” ：class="[类名1，类名2，类名…]"
静态: v-bind:class="{类名：布尔标志}" @事件=“布尔标志=取反”
<span :class="[classname,size]"></span> <!--绑定多个-->
<!--动态绑定-->
<span :class="{spancolor:showcolor}"></span>
<button @click=“showcolor=true”>变化
四、过滤器
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链接
1.入口点
(1)静态 入口
(2)路由名称动态传值
last
2.出口点
出口
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 根据条件隐藏显示元素/
字母为：{{show}}
字母为：{{show}}
字母为：{{show}}
字母为：no
<button @click=“isshow=true”>change
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:
- {{item.name}}
- {{item.name+"-"+item.sex+"-"+item.age}}
<li v-for="(item,index) in stu">{{item.name}}:{{index}} {{item.sex}}:{{index}}</li>
<li v-for="(key,item,index) in student">{{index}}:{{item}}:{{key}}</li>
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); }); } } })
作者：蕙惠子
来源：优快云
原文：https://blog.youkuaiyun.com/weixin_40976555/article/details/82778607
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
