web前端 vue介绍使用
一 知识点
vue.js 是一个以数据处理为核心的前端框架 ( 模块化，组件 .vue)
vue.js 个人开发 支付宝 尤雨溪
模式：MVVM（vue.js）
M ：model 数据层
V: view 视图层(html+css)
VM：viewModel 薄片层:是链接数据层和视图层的薄片层（vue的实例 ）
还有一种模式：MVC
M:model 数据层
V:view 视图层（html+css）
C：controller控制层（js代码）
二 Vue使用
1 . vue实例化：（两种实例化）
new Vue({
el:'',//挂载 el可以挂载class名 /标签名/html/body?
data:{数据}, //填写数据
methods：{},//填写方法
computed：{},//计算属性
beforeCreate:function(){}, //8大生命周期
created:function(){},
beforeMount:function(){},
mounted:function(){},
beforeUpdate:function()},
updated:function(){},
beforedestroy:function(){}
destroyed:function(){}
});
new Vue({
data:{ },
methods:{},
computed:{ }
}).$mount('#box')
2．Vue指令使用
1.差值表达式：{{}}
2．指令
v-model：双向绑定 可作用与input中value使用
v-if：控制css属性的消失隐藏
v-else：扩展是v-else-if
v-show:控制dome节点的删除和增加来实现消失隐藏
v-for：遍历
v-text：可以简写为{{}},并且支持逻辑运算
v-html 用于输出html
3.属性、事件绑定
事件绑定：v-on ===@
属性绑定：v-bind === ：
三 Vue组件
- 构建组件的基本步骤：
- 组件的创立（2种方法）
var com = Vue.extend({}) //传承自vue.1.0
var com = {} //传承自vue2.0
注意：里面可以写对应事件数据方法
2.组件的注册
Vue.component('lol', com) //lol相当于html标签 com是你创建的组件名
3.组件的使用（vue实例化）
new Vue({el:"#app",})
创建组件发坑：
坑1:template中必须要有一个div根标签
坑2：'' 或者"" 不能换行 ，但是模板字符串``（es6） 可以换行的
坑3：组件中的data是一个函数，用return返回数据 data() {return {}},
坑4：组件的创建和注册要在vue实例之前
坑5:驼峰的命名方式haHa，在使用组件的时候转化为
四 全局组件&局部组件
全局组件：vue.component() 能被任意vue实例使用 （放在vue实例外面）
局部组件：在vue实例中祖册组件 （放在vue实例里面）
new Vue({
el:"#app",
components:{
'lol':{ // lol相当于html标签(也相当于一个组件)
template:`
data(){},
}
})
五 组件之间个传值
父传子：通过属性绑定
1.在子级中定义一个属性k，用来存储父级的数据 props：['k'] 加引号
2.在子级的标签中绑定属性k
3.在子级中的组件构造中template 加入数据
template:`
子传父：通过事件绑定
1.在子级中添加 this.$emit(事件名，数据) 用来发送数据
2.在父级的标签中绑定事
3.在父级中添加事件用来收数据
methods:{m:function(d){// d就是子组件发过来的数据}
兄弟之间传数据：
（1）弟弟传父 父在传兄
（2）弟弟传到空的Vue实例中，兄弟从空的Vue实例中拿
这里不需要属性绑定：发送 .$emit()
接受 .$on()
六 vue路由
vue路由搭建
1.准备路由所需的组件
var Home = {
template:`
}
2.配置路由
var routes =[
{path:"/Home",component:Home}
]
3.创建路由实例
var router = new VueRouter({
routes
})
4.vues实例化(挂载路由)
new Vue({
el:"#app",
router,
})
二级路由：
在配置路由中增加children新的二级路由
var routes = [
{path:'/user',component:User,
children:[
{path:'one',component:One}, //不要加'/'因为children会自动加上去
]},]
路由传参：
1.利用二级路由传参（一个参数）只改变path {path:':kk',component:One}, 属性绑定kk（自定义）
利用$route.params.kk 获取路由的参数，也就是自己写的二级路径名
2. 二级路由中：path地址要写全 {name:'小强',path:'/home/one/',component:One}
通过名字搜索进行跳转 先写条件 在写数据 用params：{}
二级路由组件中获取的数据为params:{pwq:121212}} 利用$route.params