vue (开篇)(数据驱动)(函数式编程)(数据双向绑定)(不操作DOM)

引入vue.js文件

vue框架的优点:
1、易学,入门
2、性能好(虚拟DOM)
3、组件(高内聚,低耦合)

vue提示插件:Vetur

常用方法:注意函数中使用this指向实例

var vm = new Vue ({

el: '标签', ---标签内的元素全部被vue监听
data: {
    数据驱动
},
mounted () {
    this指向实例
    且该函数自动执行
    对异步请求的数据实时更新
},
computed: {
    total() {
        return
    }
},
    methods: {
        handleInput(e) {
            this.list.push(e.target.value)
        }
    },
    components: {
        'gp-10' : Gp10 //vue中模板中的自定义组件会自动转为小写;注意多个使用自定义标签时,不要使用单标签
    }

}).$mount('#root')

标签中的方法

v-for="" 循环
v-if="" 条件
v-bind:xxx = "" vue接管标签中的属性
v-bind: === :
v-on: === @
v-model.number= "" 数值的话转为number (语法糖)v-bind:value="" + v-on 的结合
v-on:input="" 事件处理函数
v-on:keyup.13= ""
v-on:keyup.enter= ""
v-once 布尔值,标签中的文本不在更新
v-text 不会解析标签
v-html 少用
.prevent

显示数据内容使用 : {{}}
动态参数 : []

组件

自定义:
全局定义组件
Vue.component('gp10',{

template: "浏览器认识的标签"

})

局部定义组件
var Gp10 = {

    props: ['title']
    data() {
        return {
         }
    }
template: "浏览器认识的标签",
methods: {
    自定义事件函数
}

}

实例:$话题

Object.freeze(data) --- 冻结当前属性不能修改
vm.$el --- 返回当前节点
在实例外面vm.$el = '#xxx' 无效

生命周期函数

$options : 调用自定义在Vue上的方法!this.options.方法 或 v-on:click='$option.方法'
vm.$destory() -- 销毁实例,解绑全部指令和事件监听器
触发:beforedestory 和 destoryed 的钩子

钩子

起步 new Vue()
1.beforeCreate(){}
--可以访问this
--不可以访问this.title..等其他数据属性
--此时可访问DOM模板
2.created(){} --- 数据初始化的机会,但还没渲染DOM
--第一次初始化的机会
--此时可以访问数据
--此时可访问DOM模板
【创建结束后,进入判断,判断有无$el,有无$mount,有无模板-template】
隐式函数钩子:render(createElement)
3.beforeMount(){}
--第二次初始化的机会
--此时可访问DOM模板,但并没有绚烂
【真实的绚烂DOM,替换el节点!】
4.mounted(){}

--此时DOM模板渲染完成,可以拿到该元素节点

5.beforeUpdate(){}
--当上面的钩子中data被更新的时候,指向当前钩子
--拿的DOM是原来没更新的DOM
6.updated()
--当上面的钩子中data被更新的时候,指向当前钩子
--拿的DOM是更新后的DOM
7.beforeDestory()
--卸载响应式,及__od__
8.destroyed(){}

errorCaptured

Last modification:July 24th, 2019 at 11:10 pm
如果和我讨论问题,请加好友qq/wx