vue官方文档学习

概述

vue是用于构建用户界面的渐进式框架，自底而上的应用，是一套用户救恩面的框架

声明式渲染

<div id="app">
  {
   {
    message }}
</div>
var app = new Vue({
   
  el: '#app',
  data: {
   
    message: 'Hello Vue!'
  }
})

通过简洁的模板语法来让数据渲染至dom，数据和dom的关联是响应式的。dom会随数据的变化而变化

条件与循环

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {
   {
    todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
   
  el: '#app-4',
  data: {
   
    todos: [
      {
    text: '学习 JavaScript' },
      {
    text: '学习 Vue' },
      {
    text: '整个牛项目' }
    ],
    seen:false
  }
})

处理用户输入

v-on 添加事件监听器
v-model 数据和dom绑定

<div id="app-5">
  <p>{
   {
    message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>
<div id="app-6">
  <p>{
   {
    message }}</p>
  <input v-model="message">
</div>

组件化构建应用

组件：在vue中，组件其实是一个带有自定义选项的vue实例
组件注册

Vue.component('todo-item', {
   
  template: '<li>这是个待办项</li>'
})

vue实例

vue实例的创建，选项中可以包含包括路由等一系列东西

var vm = new Vue({
   
  // 选项
})

vue实例被创建后，将data所有选项的属性加到vue的响应系统中，视图将会根据data值的不同而变化，新增的属性和object.freeze将阻止现有的响应变化。
vue实例的生命周期

模板语法

基于html的模板语法，将dom绑定vue底层实例数据，vue实例是将dom编译成虚拟的dom函数，响应系统根据函数进行实时渲染。
文本
双大括号 v-once一次性加载

<span>Message: {
   {
    msg }}</span>
<span v-once