1. vue 生命周期函数
每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如, 实例需要配置数据观测 (data observer), 编译模版, 挂载实例到 DOM , 然后在数据变化时更新 DOM . 在这个过程中, 实例也会调用一些 生命周期钩子 , 这就给我们提供了执行自定义逻辑的机会
生命周期图示
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Vue 实例生命周期函数
- </title>
- <script src="../../vue.js">
- </script>
- </head>
- <body>
- <div id="app">
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- test: 'template option'
- },
- template: '<div>{{test}}</div>',
- beforeCreate: function() {
- // 在实例初始化之后, 数据观测 (data observer) 和 event/watcher 事件配置之前被调用.
- console.log('beforCreate')
- },
- created: function() {
- // 实例已经创建完成之后被调用. 在这一步, 实例已完成以下的配置: 数据观测 (data observer), 属性和方法的运算, watch/event 事件回调. 然而, 挂载阶段还没开始,$el 属性目前不可见.
- console.log('created')
- },
- beforeMount: function() {
- // 在挂载开始之前被调用: 相关的 render 函数首次被调用
- console.log('beforeMount') console.log(this.$el);
- },
- mounted: function() {
- // el 被新创建的 vm.$el 替换, 并挂载到实例上去之后调用该钩子. 如果 root 实例挂载了一个文档内元素, 当 mounted 被调用时 vm.$el 也在文档内.
- console.log('mounted') console.log(this.$el);
- this.$data.test = '我改变了 test'
- // beforeUpdate updated 方法
- },
- beforeDestroy: function() {
- // 实例销毁之前调用. 在这一步, 实例仍然完全可用.
- console.log('beforeDestrory')
- },
- destroyed: function() {
- // ue 实例销毁后调用. 调用后, Vue 实例指示的所有东西都会解绑定, 所有的事件监听器会被移除, 所有的子实例也会被销毁.
- console.log('destroyed')
- },
- beforeUpdate: function() {
- // 数据更新时调用, 发生在虚拟 DOM 重新渲染和打补丁之前你可以在这个钩子中进一步地更改状态, 这不会触发附加的重渲染过程.
- console.log('boforeUpdate')
- },
- updated: function() {
- // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁, 在这之后会调用该钩子.
- // 当这个钩子被调用时, 组件 DOM 已经更新, 所以你现在可以执行依赖于 DOM 的操作. 然而在大多数情况下, 你应该避免在此期间更改状态, 因为这可能会导致更新无限循环.
- console.log('updated') this.$destroy();
- // 完全销毁一个实例. 清理它与其它实例的连接, 解绑它的全部指令及事件监听器.
- // 触发 beforeDestroy 和 destroyed 的钩子.
- }
- })
- </script>
- </body>
- </HTML>
View Code
2. 模板语法
Vue.JS 使用了基于 HTML 的模版语法, 允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.JS 的模板都是合法的 HTML , 所以能被遵循规范的浏览器和 HTML 解析器解析.
在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数. 结合响应系统, 在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 模板语法 </title>
- <script src="../../vue.js"></script>
- </head>
- <body>
- <div id="app">
- {{name}}
- <!--# 插值表达式 -->
- <div v-text="name"></div>
- <!-- 文本 -->
- <div v-HTML="name" :title="title"></div>
- <!-- 被插入的内容都会被当做 HTML -- 数据绑定会被忽略 -->
- <div v-text="age +'岁'"></div>
- <!--# 过滤器 -->
- {{ msg | capitalize }}
- <a v-bind:href="url"> 百度一下 </a>
v-bind 缩写
- <!-- 完整语法 -->
- <a v-bind:href="url"></a>
- <!-- 缩写 -->
- <a :href="url"></a>
v-on 缩写
- <!-- 完整语法 -->
- <a v-on:click="doSomething"></a>
- <!-- 缩写 -->
- <a @click="doSomething"></a>
- </div>
- <script>
- var App = new Vue({
- el:'#app',
- data:{
- name:'<h1>Dell</h1>',
- title:'this is a title',
- age:20,
- msg:'this is a message',
- url:'https://www.baidu.com/'
- },
- filters: {
- capitalize: function (value) {
- if (!value) return ''
- value = value.toString()
- return value.charAt(0).toUpperCase() + value.slice(1)
- }
- }
- })
- console.log(App.$data)
- </script>
- </body>
- </HTML>
View Code
3. 计算属性, 方法, 侦听器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 计算属性, 方法, 侦听器
- </title>
- <script src="../../vue.js">
- </script>
- </head>
- <body>
- <div id="app">
- <!-- 获取 fullName-->
- <!-- 第一种方式 -->
- <!--{{ fullName }}-->
- <!-- 第二种方式 -->
- <!--{{getFullName()}}-->
- <!-- 第三种方式 -->
- {{fullName}} {{ age }}
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- firstName: 'Dell',
- lastName: 'Lee',
- age: 20,
- fullName: 'Dell Lee'
- },
- // #计算属性 缓存机制, 如果依赖的值没有发生改变, 不会重新执行
- // computed:{
- // fullName:function () {
- // console.log('fullName 计算了一次')
- // return this.firstName+" "+this.lastName
- // }
- // },
- // methods:{
- // // 即使依赖的值没有发生改变, 也会重新执行
- // getFullName:function () {
- // console.log('getFullName 计算了一次')
- // return this.firstName+" "+this.lastName
- // }
- // },
- watch: {
- // #类似 computed
- firstName: function() {
- console.log('我执行了 firstName') return this.fullName = this.firstName + this.lastName
- },
- lastName: function() {
- return this.fullName = this.firstName + this.lastName console.log('我执行了 lastName')
- },
- }
- })
- </script>
- </body>
- </HTML>
View Code
4. 计算属性的 setter,getter
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 计算属性 setter 和 getter
- </title>
- <script src="../../vue.js">
- </script>
- </head>
- <body>
- <div id="app">
- {{fullName}}
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- firstName: 'Dell',
- lastName: 'Lee',
- },
- computed: {
- fullName: {
- // #依赖的值发生改变时, 执行
- get: function() {
- return this.firstName + " " + this.lastName
- },
- set: function(value) {
- var name = value.split(" ");
- console.log(name);
- this.firstName = name[0];
- this.lastName = name[1];
- }
- }
- }
- })
- </script>
- </body>
- </HTML>
View Code
来源: http://www.bubuko.com/infodetail-2958600.html