Vue复习-------（1）-优快云博客

本文从Vue.js的基础用法入手，详细介绍了如何使用Vue.js进行页面元素绑定、条件渲染、列表渲染、事件处理、表单输入绑定及组件化开发等内容，并通过实例展示了Vue.js的数据响应式机制和生命周期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于跨专业学的前端，所以一直没有什么项目做（貌似只写了几个demo），前段时间学的vue都快要忘了。。。。。。所以为了复习方便，写了这几篇文章，前面这几篇就是把vue官网敲了一遍，一是复习一下二是方便我随时随地看，往后几篇则是源码分析

挂载

<div id="app">        
    {{ message }}    
</div>复制代码

var app = new Vue({            
    el: '#app',            
    data: {                
        message: 'Hello Vue!'            
    }        
})复制代码

<div id="app-2">        
    <span v-bind:title="message">            
        鼠标悬停与此        
    </span>    
</div>复制代码

new Vue({            
    el: "#app-2",            
    data: {                
        message: new Date().toLocaleString()            
    }        
})复制代码

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>复制代码

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
app.seen = false;复制代码

<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: '整个牛项目' }
    ]
  }
})复制代码

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>复制代码

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})复制代码

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>复制代码

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})复制代码

v-model实际上是一个语法糖，实际上实现方法如下

<input type="text" v-bind:value="inputValue" v-on:input="inputValue = $event.target.value" >复制代码

组件

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>复制代码

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})复制代码

数据与方法

vue实例被创建以后新添加的data数据不是响应式的

var obj = {
  foo: 'bar'
}

Object.freeze(obj)//冻结obj，防止响应系统追踪变化

new Vue({
  el: '#app',
  data () {
    return {
      obj
    }
  }
})复制代码

vue暴露到外部的几个接口，以$为前缀，防止与用户定义的混淆

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
复制代码

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})复制代码

实例生命周期

created：实例被创建后执行内部代码，还有mounted，updated，destroyed

new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log('a is: ' + this.a)
  }
})复制代码

官网上生命周期的图大概就是：先new一个Vue实例，触发beforeCreate和created，判断是否有el挂载DOM，有就查看template模板（有就用模板替换html，没有就用原生html），没有就等待vm.$mount()被调用。然后在beforeMount生命周期钩子触发完毕后，将vm.$el替换用户自己定义的el，然后触发mounted钩子。然后检查data是否有更新，有就触发beforeUpdata，以及updated。最后在vm.$destroy()调用时，先触发beforeDestroy钩子，然后销毁vue实例（卸载watch，组件，事件监听等），最后调用destroy钩子，销毁完毕。

模板语法

文本

<span>Message: {{ msg }}</span>
<span v-once>这个将不会改变: {{ msg }}</span>复制代码

html（动态渲染html很危险，少用，小心xss攻击）

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>复制代码

使用v-bind修改html

<div v-bind:id="dynamicId"></div>复制代码

使用js表达式（注意，只能包含单个语句）

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>复制代码

参数

响应式更新属性

<a v-bind:href="url">...</a>复制代码

响应式监听DOM

<a v-on:click="doSomething">...</a>复制代码

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>复制代码