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
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏