最新消息:

Vue 2.x 基础知识

Vue fishpro 65浏览
文章目录
[隐藏]

对于学习 Vue 知识来说,我的认知就是, Vue 初级教程分为 组件教程和非组件教程(基础知识)。其中基础知识实际上话很少事件求能了解(不需要记住)
Vue 的教程无需购买其他书籍,官方的教程就很全有视频教程。官方教程.

基础教程包括了
1. 数据与方法
2. 生命周期
3. 模板语法
4. 计算属性和侦听器
5. Class 与 Style
6. 条件渲染
7. 列表渲染
9. 表单输入绑定
10. 组件基础

1 数据与方法

这里的数据与方法,就是指 Vue 在 Script 标签中如何使用数据和方法。这里的数据方法跟我们使用 Jquery 的时候差别不大。

<script>
var vue=new Vue({
    el:"#app",
    data:{
        key:value,
        key2:value2
    },
    methods:{
        funname:function(){
            //do something
        }
    }
})
</script>

其中 数据 data 可以在外部下定义

<script>
var data = {
        key:value,
        key2:value2
    }
var vue=new Vue({
    el:"#app",
    data:data,
    methods:{
        funname:function(){
            //do something
        }
    }
})
</script>

也可以在外部定义数据

<script>
var vue=new Vue({
    el:"#app",
    data:{
        key:value,
        key2:value2
    },
    methods:{
        funname:function(){
            //do something
        }
    }
})
vue.$data=data
</script>

2 生命周期与生命钩子方法


<script> export default { data: function() { return { message: "msg" }; }, beforeCreate: function() { console.group("beforeCreate 创建前状态===============》"); console.log("%c%s", "color:red", "el : " + this.$el); //undefined console.log("%c%s", "color:red", "data : " + this.$data); //undefined console.log("%c%s", "color:red", "message: " + this.message); }, created: function() { console.group("created 创建完毕状态===============》"); console.log("%c%s", "color:red", "el : " + this.$el); //undefined console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, beforeMount: function() { console.group("beforeMount 挂载前状态===============》"); console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, mounted: function() { console.group("mounted 挂载结束状态===============》"); console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, beforeUpdate: function() { console.group("beforeUpdate 更新前状态===============》"); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, updated: function() { console.group("updated 更新完成状态===============》"); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, beforeDestroy: function() { console.group("beforeDestroy 销毁前状态===============》"); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, destroyed: function() { console.group("destroyed 销毁完成状态===============》"); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); } }; </script>

执行后,如下图
如果使用了 amount(“#app”)表示通过挂载的方式载入,那么只有当 mounted 的时候 el 才会有对象

3 模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。

3.1 文本

<span>Message: {{ msg }}</span>

3.2 显示html

<span v-html="rawHtml"></span>

3.3 特性

我们不能再 HTML 标签上直接写 {{}} Mustache 语法,这个时候,我们需要用到 v-bind 指令

<div v-bind:id="dynamicId"></div>

3.4 javascript

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

3.5 指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:

<p v-if="seen">现在你看到我了</p>

3.6 指令+参数

v-bind 指令可以加参数,例如在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

<a v-bind:href="url">...</a>

另一个例子是 v-on 指令,它用于监听 DOM 事件

<a v-on:click="doSomething">...</a>

3.7 动态参数

2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:

<!--
注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href。

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中,当 eventName 的值为 “focus” 时,v-on:[eventName] 将等价于 v-on:focus。

4 计算属性和侦听器

模板内支撑表达式

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

4.1 计算属性

计算使用 computed 方法,计算是指根据现有的变量计算出第三个变量的变化。

<template>
  <div class="about" id="about">
    <div id="example">
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return { message: "msg" };
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
};
</script>

以上示例我们统一可以编写一个方法实现

<template>
  <div class="about" id="about">
    <div id="example">
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return { message: "msg" };
  },
  methods: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
};
</script>

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
例如:
“`html
computed: {
now: function () {
return Date.now()
}
}
““

4.2 侦听器

侦听使用 watch 方法,侦听一般用于一个变量的变化促使其他变量的变化

Class 与 Style

条件渲染

列表渲染

组件基础

转载请注明:程序鱼 » Vue 2.x 基础知识