Vue学习

最新推荐文章于 2024-09-13 08:33:26 发布

diyanzhi7310

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量126

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/theLifeOfHubo/p/9827933.html

版权

一：vue的使用

创建一个vue对象，

var vm = new Vue({

　　el:'#id',

　　data:{

　　　　a:10

　　}

});

场景：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.输出到html中：<div>{{a}}</div>

2.现在我不想输出到html内容中，我想输出到标签的属性中去，比如div的title中：<div v-bind:title="a">你好</div> 或者 <div :title="a">你好</div>

3.在vue中如何使用事件：<div v-on:click="事件函数名">{{a}}</div> 或者 <div @click="事件函数名">{{a}}</div>

4.我想让用户输入一些数据：

5.循环data里的数组到元素中：

data:{
　　studentInfo:[
　　　　{'name':'hubo','age':12},
　　　　{'name':'xiaohong','age':22},
　　　　{'name':'bangzi','age':44}
　　]
}

6.{{a}} vue的表达式有点局限，因为我输出的话有可能是html文本，有可能是a标签等等，但是{{}}花括号都给我转义了，直接输出了，可是我想生成一个a标签等等。这里就使用了v-html

data:{
　　a:'<a href="http://www.baidu.com">baidu</a>'
}

7.实现两个输入框，用户输入两个数字，立马求得和。

<input type="text" v-model:value="setA">
<input type="text" v-model:value="setB">
{{a+b}}

data:{
　　a:0,b:0
},
computed:{
　　setA:{
　　　　get:function(){
　　　　　　return this.a;
　　　　},
　　　　set:function(newValue){
　　　　　　this.a = parseInt(newValue);
　　　　}
　　},
　　setB:{
　　　　get:function(){
　　　　　　return this.b;
　　　　},
　　　　set:function(newValue){
　　　　　　this.b = parseInt(newValue);
　　　　}
　　}
}

8.监听：

<input type="text" v-model="a">{{a}}

watch:{
　　a:function(newval,oldval){
　　alert('cong' + oldval + '->' +newval);
　　}
}

9.事件之修饰符

10：v-if使用

指令：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

{{}} -----称为vue表达式

v-bind：绑定属性简写 ‘冒号：’

v-on：绑定事件，配合methods　　简写 ‘@’ ----------------------事件里边还有关键词是修饰符：

v-model:双向绑定，就是数据层变，那么我视图层也会变。视图层变，我的数据层也会变。

v-for：循环数据

v-html：原样输出html

v-if：表示判断。如果是true就显示，如果是false就是不显示。不显示的话，就是让元素消失，删除，而不是隐藏。

v-show:和上边的v-if相似，但是v-show是把元素隐藏。

v-cloak:可以这遮盖、隐藏因为网速慢的原因导致的元素数据没出来的情况。

v-once：提高性能

v-pre：提高性能

花括号里面是操作：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

el：是指定vue的作用范围

data：是数据

methods:是函数，绑定事件的函数在这里命名

computed：计算数据：受控制的访问--get set ---适合同步操作

watch：监听，当数据变化的时候，我们能知道，有通知 ----适合异步操作

vue-router：-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

路由就是一个锚点，根据锚点来显示不同的组件。

路由对象：

1.path 匹配的路由路径

2.component 路由主体：包括template、

3.children 子路由

1.先声明一个路由：

var r1 = new VueRouter({

　　routes:[

　　　　{path:'/user',component:{

　　template:'<div>用户列表<.div>'

　　}},

　　　　{path:'/article',component:{

　　template:'<div>文章列表</div>'

　　}}

]

});

2.调用这个路由,把r1放入我们的对象里边。

var vm = new Vue({

　　el:'#app',

　　router:r1

});

3.路由放入了vue对象中还不够，你必须告诉vue，我这个组件要在哪里渲染，使用router-view标签这个渲染容器来告诉vue在哪里渲染、

<router-view></router-view>

使用<router-link></router-link>标签来实现用户点击，其实也就是一个a标签。

<router-link to="/user">用户</router-link> 作用其实都是一样的，但是就是#不用写。还有一个好处：编译完之后多了一个class，就是默认点击的class---active

4.路由都有参数。

window.onload = function(){
　　var r1 = new VueRouter({
　　　　routes:[
　　　　　　{path:'/user/:id/',component:{
　　　　　　template:'<div>{{$route.params.id}}</div>'
　　　　}}
　　]
});

var vm = new Vue({
　　el:'#app',
　　router:r1
　　});
};

5.js操作路由：

在vm对象中：this.$router.go(-1);

　　　　 this.$router.push()

6.路由的监听：

方法1是使用vm对象的watch，不推荐，因为路由对象已经有方法可以使用。

window.onload = function(){
　　var r1 = new VueRouter({
　　routes:[
　　　　{path:'/user/:id/',component:{
　　　　template:'<div>{{$route.params.id}}</div>'
　　　　}}
　　]
});

方法2：使用路由对象的beforeRouteUpdate:在路由对象中的component，可以有多个内容。不仅仅局限于templa

window.onload = function(){

　　var v1 = new VueRouter({

　　　　route:[

　　　　　　{path:'/user',component:{

　　　　　　　　template:'<div>{$route.params.id}</div>',

　　　　　　　　beforeRouteUpdate(to,from,next){

　　　　　　　　　　console.log(to);

　　　　　　　　　　console.log(from);

　　　　　　　　　　next();------------------------------------------------------------------是用来路由切换的。

　　　　　　　　}

　　　　　　}}

　　　　]

　　});

};

7.子路由，嵌套路由。

window.onload = function(){
　　var r1 = new VueRouter({
　　routes:[
　　　　{path:'/user/:id/',
　　component:{
　　　　template:'<div>用户：{{$route.params.id}}<router-view></router-view></div>',
　　},
　　children:[
　　　　{
　　　　　　path:'info',
　　　　　　component:{
　　　　　　template:'<div>个人信息</div>'
　　　　}
　　},
　　　　{
　　　　　　path:'pass',
　　　　　　component:{
　　　　　　template:'<div>修改密码</div>'
　　　　}
　　}
]

}
]
});

var vm = new Vue({
el:'#app',
router:r1
});
};

8.命名路由：

router-link：

1.基本：to="/路径"

2.扩展： :to="{name，path，params，query}"

9.命名视图：多视图：

window.onload = function(){
　　var r1 = new VueRouter({
　　　　routes:[
　　　　　　{
　　　　　　　　path:'/user',
　　　　　　　　components:{
　　　　　　　　　　default:{
　　　　　　　　　　　　template:'<div>欢迎你</div>'
　　　　　　　　　　　},
　　　　　　　　　　a:{
　　　　　　　　　　　　template:'<div>国家</div>'
　　　　　　　　　　　},
　　　　　　　　　　b:{
　　　　　　　　　　　　template:'<div>城市</div>'
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　]
});