【前端Vue】Vue学习笔记之基础内容-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端Vue】Vue学习笔记之基础内容。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Vue实例

Vue实例:通过new Vue()创建的Vue实例,它关联一个DOM元素并提供数据和组件的上下文。

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

什么是DOM？

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。

二、模板语法

模板语法:在Vue中,我们使用模板来声明式的将数据渲染为DOM,常用的有{{}}插值,v-bind,v-if,v-for等。

<div id="app">
  {{ message }}
  <span v-bind:title="message">鼠标悬停显示</span>
  <span v-if="seen">现在你看到我了</span>
  <ol>
    <li v-for="todo in todos">{{ todo.text }}</li>
  </ol> 
</div>

三、计算属性

计算属性:计算属性用来从当前组件的 state 中派生出新的值,可以通过getter和setter实现数据的响应式。它的优点是高效缓存,在数据不变时会立即返回之前的计算结果。

var vm = new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

四、监听器

监听器:通过watch选项,我们可以观察指定的数据源,一旦数据变化,就会执行监听器里所定义的function。它的用途比computed更加广泛,不仅可以转变数据,还可以触发异步操作。

watch: {
  message: function (newVal, oldVal) { 
    // 这个函数将在 `message` 改变后调用
  }
}

五、组件

组件:组件是Vue最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码。我们通过Vue.component()创建全局组件,Vue.component()创建局部组件。

// 全局组件定义
Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data: function () {
    return {
      msg: 'Hello World!'
    }
  }
})
// 局部组件定义
var Child = {
  template: '<div>{{ msg }}</div>',
  data: function () {
    return {
      msg: 'Hello World!'
    }
  } 
}
new Vue({
  // ...
  components: {
    'my-component': Child
  }
})

六、数据双向绑定

数据双向绑定:Vue实现了数据与视图的双向绑定,当我们在js里面改变数据的时候,视图会自动更新,反之亦然。这是Vue相比其他MVVM框架的一大亮点。
在Vue中,数据双向绑定是通过数据劫持结合发布者-订阅者模式来实现的。
这里有一个简单的例子:

<div id="app">
  <input v-model="message">
  <p>{{message}}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
})

代码说明

我们在input元素上使用v-model指令,这会把input和data.message联系起来。
用户输入什么,data.message 的值就变成什么。
然后,渲染的
也会更新并显示新的值,因为它绑定到同一个data.message 属性。
如果Vue实例中的代码稍后改变了data.message,那么input元素显示的值也会改变。
当我们修改Vue实例中的数据时,DOM会更新。这是数据影响视图。
当我们修改DOM时(比如输入),数据也会更新。这是视图影响数据。

七、生命周期钩子

生命周期钩子:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、挂载实例到 DOM、渲染数据等。在这个过程中,Vue会运行一些叫做生命周期钩子的函数,允许开发者添加自己的代码。

八、Slots（待补充）

Slots:通过Slot分发内容,我们可以在父组件中通过插槽向子组件传递内容。子组件可以设置默认内容,也可以设置具名插槽让父组件的内容分配到指定位置。

<navigation-link url="/profile">
  <!-- Add slot content here -->
  <span class="profile">Your Profile</span> 
</navigation-link>

<script>
Vue.component('navigation-link', {
  props: ['url'],
  template: `
    <a :href="url" class="nav-link">
      <slot></slot>
    </a>
  `
})
</script>