Vue 入门-Vue 的生命周期函数种类

🎉 什么是回调函数?

//定义主函数，回调函数作为参数
function A(callback) {
    callback();
    console.log('我是主函数');
}
//定义回调函数
function B(){
    setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作
}
//调用主函数，将函数B传进去
A(B);
//输出结果
我是主函数
我是回调函数

🎉 什么是 Vue 中的钩子（hook）?

Vue 入门-Vue 的 template

🎉Vue 的代码缩进规范？###

缩进：两个空格。

Vue 语法-Vue 的插值相关操作

🎉Vue 的插值操作（Mustache）？

Mustache：翻译为胡须，也可称为双大括号语法。

Mustache 语法中不仅可以写变量，也可以写简单的表达式。

1
2
3

{{message}}
{{message * 2}}
{{message1 + '' + message2}}

🎉Vue 的“v-once”？

该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

1 2	<h2>{{message}}</h2> <h2 v-once>{{message}}</h2>

🎉Vue 的“v-html”？

该指令后面往往会跟上一个 string 类型，会将 string 的 html 解析出来并且进行渲染。

<h2 v-html="url"></h2>
<!--省略代码-->
data:{
  url: "<a href='http://baidu.com'>百度一下</a>"
}

🎉Vue 的“v-text”？

v-text 作用和 Mustache 比较相似：都是用于将数据显示在界面中。

v-text 通常情况下，接受一个 string 类型。

1 2	<h2>{{message}}</h2> <h2 v-text="message"></h2>

🎉Vue 的“v-pre”？

v-pre 用于跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法。

1 2	<h2>{{message}}</h2> <h2 v-pre>{{message}}</h2>

🎉Vue 的“v-cloak”？

在某些情况下，我们浏览器可能会直接显然出未编译的 Mustache 标签。

而 v-cloak 可以实现为标签附加属性，从而控制 css 样式。

<style>
  [v-cloak]{
    display: none;
  }
</style>
<!--省略代码-->
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

Vue 语法-Vue 的绑定相关操作

🎉Vue 的“v-bind”？

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

<div id="app">
<img v-bind:src="imgurl" alt="">
</div>
<!--省略代码-->
data:{
imgurl:"http://www.suntop168.com/blog/zb_users/upload/2014/2/19728151.png"
}

🎉Vue 的“v-bind”的语法糖？

缩写：:

1	<img :src="imgurl" alt="">

🎉Vue 的“v-bind”动态绑定“class”之对象语法？

用法一：直接通过{}绑定一个类

1	<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值

1	<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突

注：如果 isActive 和 isLine 都为 true，那么会有 title/active/line 三个类

1	<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个 methods 或者 computed 中

注：classes 是一个计算属性

1	<h2 class="title" :class="classes">Hello World</h2>

例子：

<style>
  .active{
    color: red;
  }
  .line{
    border:1px dashed #000;
  }
</style>
<!--省略代码-->
<div id="app">
  <h2 v-bind:class="active">{{message}}</h2>
  <h2 v-bind:class="{active:isactive,line:isline}">{{message}}</h2>
  <!--对象语法-->
  <button v-on:click="btnClick"></button>
  <!--点击切换属性-->
</div>
<!--省略代码-->
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好！',
      active:"active",
      isactive:true,
      isline:true,
    }，
    methods:{
      btnClick: function () {
        this.isactive = !this.isactive
      }
    }
  })
</script>

🎉Vue 的“v-bind”动态绑定“class”之数组语法？（用的较少）