1.vue是什么
vue不仅是框架类库, 更是一套生态,vue.js以数据驱动的数据绑定框架
vue组件 : vue-i18n, vue-resource,element-ui
vuejs官方: vue-doc,vuejs, vuex.vue-router,vue-cli
包管理/构建工具: webpack ,babel,npm/yarn
第三方库/插件 jquery, jquery plugins bootstrap, ichart, d3
- vue生命周期
beforecreate->created ->before mount ->mounted ->beforeUpdate->update->beforeDestroy->destroy
- vue的mvvm模式
view->viemodel->Model 对应 Dom->VUE->POJO(原生js对象)
4.vue的组件化
可复件组件
//扩展vue来自定义一个可复制最的组件
vue component=Vue.extend({
template:'<p>
{{msg}}
</p>',
paramAttributes:['msg']
})
//全局注册该组件
Vue.component("my-com",component)
//my-com组件的模板会被填充到元素中,msg做为数据传传进去. 变成 <p>hello</p>
//通过paramAttributes实现父子之音的数据传递
<my-com msg="hello"></my-com>
5.vue程序运行的流程
1.node命令执行js文件
2.js文件启动express服务器,把webpack作为中间件加载进来
3.webpack来处理拉下来的事. a.配置项目入口文件, b.load不同资源, 3热更新
6.vue前端路由
根据不同的 用户事件,显示不同的页面内容
Vue Router是vue.js官方提供的功能强大的前端路由管理器,
实现原理:
1.基于url的hash (/#/abc), hash变化不会触发整个页面重新加载,但会导致浏览器历史访问记录变更
vuerouter的使用
1.导入Js文件 vue_xx.js 和vue-router_xx.js
2.添加路由链接<router-link to ="/manager">后台管理</router-lin>
3.添加路由占位符<router-view></router-view>
4.定义路由组件
const manager={template:'<h1>
后台管理 组件
</h1>'}
5.配置路由规则并创建路由实例
const myrouter=new VueRouter({
routes:[
{path:'/manager',component:manager}
]
})
6.将路由挂载到vue实例
const vm=new Vue({
el:'#app',
data:{},
router:myrouter
})
7.嵌套路由实现.
子路由中把父路由写在模板中.
children表示子路由规则.
7.vue的虚拟dom
是一个轻量级的js对象,在状态发生变化时, 进行diff运算,来更新只需要被替换的dom,而
虚拟dom运行过程
object ->render(生成虚拟节点)->createelement(基于虚拟节点创建dom节点)-diff(状态改变,diff运行,生成补丁对象)->patch(遍历补丁对象,更新dom节点)
8.vue的计算属性,侦听属性,方法
8.1 计算属性
有缓存,在依赖值不变的情况下不会被再次调用
根据现有数据去生成新数据
逻辑复杂或者性能开销大时,用计算属性
<p id="example">属性值: {{showName}}</p>
<p id="example">计算属性值 {{computer_showName}}</p>
var vm=new Vue({
el:'#example',
data:{
showName:'hello'
},
computed:{
computer_showName:function(){
return this.showName.split('').reverse().join('')
}
}
})
8.2侦听属性
有缓存,在监听的变量没有变化时,不会被再次调用
侦听的是已经在data中定义的变量
需要在数据变化时执行异步或者开销较大操作时用
<p id="example">属性值: {{first}}</p>
var vm=new Vue({
el:'#example',
data:{
first:'first',
second:'second',
},
watch:{
second:function(val){
return this.first=val+this.second
}
}
})
8.3. 方法:
没有缓存,页面渲染一次,方法执行一次,
<p>{{showName()}}</p>
//方法
methods:{
showName:function(){
return 'hello'
}
}
- vuex是什么
vuex是一个专为vue.js开发的状态管理模式,采用集中式存储管理应用的所有组件的状态.并以相应的规则保证状态以一种可预测的方式发生变化
状态管理模式
state:驱动应用的数据源
data()({return {count:0}})
view:以声明方式将state映射到视图
template:'<div>
{{count}}
</div>'
actions:响应在view上的用户输入导致的状态变化
methods:{
showname(){
return 'hello'
}
}
- vue工程目录
1.public :本地服务器的文件,系统图标和index.htm
2.assets:静态资源
3.components:公共组件存放文件夹
4.router 路由文件存放,里面的index.js是项目路由的封装文件
5.store 状态管理, 里面的index.js是vuex的封装文件,用来设置通用变量和方法
6.views 项目中各模块主要功能的存放文件夹,
7.app.vue 项目主组件,也是项目组件和路由的出口
8.main.js 引用了vue模块和app.vue以及路由router,全局使用的东西在这里定义
11.vue重要指令
1. v-bind :动态切换class , style ,
v-bind:class="{active:isactive,'text-danger':haserror}"
<div v-bind:class="[activeClassA,activeClassB]">
</div>
v-on :监听dom事件,在触发时运行js代码
<button v-on:click='red'> red </button> methods:{ red:function(event){ alert("red"); } }
3.v-if:根据表达式渲染元素,
<p v-if="red">
red
</p>
data:{
red:true
}
4.v-for 绑定数组
<li v-for='todo in todos'>
{{
toto.text
}}</li>
data:{
todos:[
{text:'1'},{text:'2'},
]
}
还不快抢沙发