本文共 3694 字，大约阅读时间需要 12 分钟。

介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

引入

数据与方法

• 案例

			
   								
   
    			{
  {name}}
    
			{
  {errorText}}
    
			{
  {code}}		
   
				changeName							

• Object.freeze()方法

Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

• $方法

Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来

var data = {
    a: 1 }var vm = new Vue({
     el: '#example',  data: data})vm.$data === data // => truevm.$el === document.getElementById('example') // => true// $watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) {
     // 这个回调将在 `vm.a` 改变后调用})

生命周期

生命周期钩子

new Vue({
     data: {
       a: 1  },  created: function () {
       // `this` 指向 vm 实例    console.log('a is: ' + this.a)  }})// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 、 和 。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项 property 或回调上使用，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

模板语法

插值 v-text/v-html

• 文本

Using mustaches: {
  { rawHtml }}

• 原始html

• 属性

button

• JavaScript表达式

{
  { number + 1 }}{
  { ok ? 'YES' : 'NO' }}{
  { message.split('').reverse().join('') }}
   

指令v

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

现在你看到我了

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 元素。

参数v-bind

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

...

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

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

...

动态参数v-bind:[]=“”

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

    ... 

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

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

 ... 

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

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：

    ... 

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

    ... 

修饰符

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

   
    ...
   

缩写

[bind 缩写]

   ...
   ...
    ... 

v-on 缩写

   ...
   ...
    ... 

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。

v-show

根据值确定标签是否显示,操作标签属性

v-if

根据值确定标签是否显示,操作DOM

v-for

{
  {i}}
{
  {index}}----{
  {item}}
	    {
  {user.name}}    {
  {user.age}}

v-model

将表单值和data中的数据关联起来，实现双向绑定

案例

		
   
			
    
				
     
{
  {i}}
			
    
						
    
				
     
{
  {index}}->{
  {item}}
			
    
						
    
				     
      
					       
姓名
					       
年龄
				      
				      
					       
{
  {user.name}}
					       
{
  {user.age}}
				      
			     
    
					
   
							

计算属性

案例

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

结果：

Original message: “Hello”

Computed reversed message: “olleH”

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage) // => 'olleH'vm.message = 'Goodbye'console.log(vm.reversedMessage) // => 'eybdooG'

转载地址：https://console.blog.csdn.net/article/details/111983485 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！