vue相关知识笔记记录

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'
}
}

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'},
]
}

技术追寻

技术追寻

vue相关知识笔记记录