vue实例整理1

一 介绍

（1）       声明式渲染, 文本插值

<div id="app">
    <p>{{message}}</p>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:‘#app‘,
        data:{
            message:‘Hello Vue.js!‘
        }
    })
</script>

（2）       v-bind绑定DOM元素属性

<div id="app-2">
    <span v-bind:title="message">鼠标悬停几秒，可看到此处动态绑定的title</span>
</div>
<script src="scripts/vue.js"></script>
<script>
    var app2 = new Vue({
        el:"#app-2",
        data:{
            message:‘页面加载于 ‘ +new Date()
        }
    })
</script>

<div id="demo">
    <div v-bind:href="url">a</div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            url:‘http://baidu.com‘
        }
    })
</script>

（3）       条件与循环，

v-if:

<div id="demo">
    <p v-if="seen">you can see me</p>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            seen:true
        }
    })
</script>

v-for:

<div id="app-4">
    <ol>
        <li v-for="todo in todos">{{todo.text}}</li>
    </ol>
</div>
<script src="scripts/vue.js"></script>
<script>
    var app4 = new Vue({
        el:"#app-4",
        data:{
            todos:[
                {text:‘学习JavaScript‘},
                {text:‘学习vue‘},
                {text:‘创建激动人心的代码‘}
            ]
        }
    })
</script>

（4）       处理用户输入

v-on 指令 来增加事件监听器，触发事件后会调用 Vue 实例中 methods 下定义的方法：

<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">翻转message</button>
</div>
<script src="scripts/vue.js"></script>
<script>
    var app5 = new Vue({
        el:"#app-5",
        data:{
            message:‘hello‘
        },
        methods:{
            reverseMessage:function(){
                this.message = this.message.split(‘‘).reverse().join(‘‘)
            }
        }
    })
</script>

v-model 指令，实现表单输入和应用程序状态之间的双向绑定：

<div id="app-6">
    <p>{{message}}</p>
    <input v-model="message" />
</div>
<script src="scripts/vue.js"></script>
<script>
    var app6 = new Vue({
        el:‘#app-6‘,
        data:{
            message:‘hello vue‘
        }
    })
</script>

（5）       Component

<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>
<script src="scripts/vue.js"></script>
<script>
    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:‘水果‘}
            ]
        }
    })
</script>

二 vue实例

（1）       构造函数

可以通过预先定义选项扩展 Vue 构造函数，从而创建可复用的组件构造函数：


var MyComponent =   Vue.extend({

// 扩展选项

})

// `MyComponent` 的所有实例，都将由预先定义的扩展选项来创建

var   myComponentInstance = new MyComponent()

（2）       属性与方法

var data = { a: 1 }

var vm = new Vue({

  data: data

})

vm.a === data.a // -> true

// 设置属性也会影响到原始数据

vm.a = 2

data.a // -> 2

// ... 反之亦然

data.a = 3

vm.a // -> 3

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

（3）       实例生命周期钩子函数

var vm = new Vue({

  data: {

    a: 1

  },

  created: function () {

    // `this` 指向 vm 实例

console.log(‘a is: ‘ + this.a)

  }

})

// -> "a is: 1"

三 模板语法

（1）       插值

文本插值：

<div id="demo">
    <span>{{message}}</span>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            message:‘hi‘
        }
    })
</script>

纯html，v-html：

<div id="demo">
    <div v-html="message"></div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            message:‘<span>hello</span>‘
        }
    })
</script>

属性，v-bind：

<div id="demo">
    <div v-bind:href="url">a</div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            url:‘http://baidu.com‘
        }
    })
</script>

Javascript表达式：

{{ number + 1 }}

{{ ok ? ‘YES‘ : ‘NO‘ }}

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

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

（2）       指令

v-前缀的特殊属性

v-bind 指令被用来响应地更新 HTML 属性：

<div id="demo">
    <div v-bind:href="url">a</div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            url:‘http://baidu.com‘
        }
    })
</script>

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定:
<div id="demo">
    <form v-on:submit.prevent="onSubmit">a</form>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        methods:{
            onSubmit:function(){
                alert(‘hi‘)
            }
        }
    })
</script>

（3）       过滤器

Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0+ 开始支持）中使用，因为过滤器设计目的就是用于文本转换。

<!-- in mustaches -->

{{ message | capitalize }}

<!-- in v-bind -->

<div v-bind:id="rawId | formatId"></div>

<div id="demo">
    {{message|capitalize}}
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            message:‘helloyi‘
        },
        filters:function(value){
            if(!value) return ‘‘
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        }
    })
</script>

（4）       缩写

<!-- 完整语法 -->

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

<!-- 缩写 -->

<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

四 计算属性

（1）       模板中绑定表达式比较方便，但只适用于简单的操作。模板中放入太多的逻辑会让模板过重且难以维护。这时可以选择计算属性。

<div id="example">
   <p>Original message:"{{message}}"</p>
    <p>Computed reversed message:"{{reversedMessage}}"</p>
</div>
<script src="scripts/vue.js"></script>
<script>
    var vm = new Vue({
        el:‘#example‘,
        data:{
            message:‘hello‘
        },
        computed:{
            reversedMessage:function(){
                return this.message.split(‘‘).reverse().join(‘‘)
            }
        }
    })
</script>

//   Original message: "Hello"

//   Computed reversed message: "olleH"

（2）       计算缓存 与  Methods

<div id="example">
    <p>{{now}}</p>
</div>
<script src="scripts/vue.js"></script>
<script>
    var vm = new Vue({
        el:‘#example‘,
        data:{
            message:‘hello‘
        },
        computed:{
            now:function(){
                return Date.now()
            }
        }
    })
</script>

<div id="example">
    <p>Original message:"{{message}}"</p>
    <p>Computed reversed message:"{{reversedMessage()}}"</p>
</div>
<script src="scripts/vue.js"></script>
<script>
    var vm = new Vue({
        el:‘#example‘,
        data:{
            message:‘hello‘
        },
        methods:{
            reversedMessage:function(){
                return this.message.split(‘‘).reverse().join(‘‘)
            }
        }
    })
</script>

Ps：计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。而methods调用总会执行函数。

（3）       计算属性 与 watched属性

<div id="demo">
    {{ fullName }}
</div>
<script src="scripts/vue.js"></script>
<script>
  var vm = new Vue({
      el:‘#demo‘,
      data:{
          firstName:‘Foo‘,
          lastName:‘Bar‘,
          fullName:‘Foo Bar‘
      },
      watch:{
          firstName:function(val){
              this.fullName = val + ‘ ‘ + this.lastName
          },
          lastName:function(val){
              this.fullName = this.firstName + ‘ ‘ +val
          }
      }
  })
</script>

<div id="demo">
    {{ fullName }}
</div>
<script src="scripts/vue.js"></script>
<script>
    var vm = new Vue({
        el:‘#demo‘,
        data:{
            firstName:‘Foo‘,
            lastName:‘Bar‘
        },
        computed:{
            fullName: function(){
                    return this.firstName + ‘ ‘ + this.lastName
                }
         }
    })
</script>

（4）       计算setter

<div id="demo">
    {{ fullName }}
</div>
<script src="scripts/vue.js"></script>
<script>
    var vm = new Vue({
        el:‘#demo‘,
        data:{
            firstName:‘Foo‘,
            lastName:‘Bar‘ 

        },
        computed:{
            fullName:{
                get:function(){
                    return this.firstName + ‘ ‘ + this.lastName
                },
                set:function(newValue){
                    var names = newValue.split(‘ ‘)
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            } 

        } 

    })
</script>

五 class与style绑定

（1）       绑定html class

对象语法：传给v-bind：class一个对象，以动态地切换class

<div id="demo">
    <div class="static" v-bind:class="{active:isActive,‘text-danger‘:hasError }"></div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            isActive:true,
            hasError:false
        }
    })
    //渲染结果为div的class="static active"
</script>

 <div v-bind:class="{ active: isActive }"></div>

<div id="demo">
    <div v-bind:class="classObject"></div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data: {
            classObject:{
                active:true,
                ‘text-danger‘:false
            }
        }
    })
//渲染结果为div的class="active"
</script>

<div id="demo">
   <div v-bind:class="classObject"></div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            isActive:true,
            error:null
        },
        computed:{
            classObject:function(){
                return {
                    active:this.isActive && !this.error,
                    ‘text-danger‘: this.error && this.error.type === ‘fatal‘
                }
            }
        }
    })
    //渲染结果为div的class="active"
</script>

数组语法：把一个数组传给v-bind:class，以应用一个class列表

<div id="demo">
      <div v-bind:class="[activeClass,errorClass]"></div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            activeClass:‘active‘,
            errorClass:‘text-danger‘
        }
    })
    //渲染结果为div的class="active text-danger"
</script>

<div id="demo">
    <div v-bind:class="[isActive ? activeClass : ‘ ‘,errorClass]"></div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            isActive:true,
            activeClass:‘active‘,
            errorClass:‘text-danger‘
        }
    })
    //渲染结果为div的class="active text-danger"
    //此例始终添加errorClass，但只要在isActive为true的情况下添加activeClass的值
</script>

<div id="demo">
    <!-- 当有多个条件class时，可以如下方式在数组语法中使用对象语法-->
    <div v-bind:class="[{active:isActive},errorClass]"></div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            isActive:true,
            activeClass:‘active‘,
            errorClass:‘text-danger‘
        }
    })
    //渲染结果为div的class="active text-danger"
</script>

用在组件上：

<div id="demo">
    <my-component class="baz boo"></my-component>
</div>
<script src="scripts/vue.js"></script>
<script>
    Vue.component(‘my-component‘,{
        template:`<p class="foo bar">hi</p>`
    })
    new Vue({
        el:"#demo",
    })
    //HTML 最终将被渲染成为:<p class="foo bar baz boo">Hi</p>
</script>

<div id="demo">
    <my-component v-bind:class="{active:isActive }"></my-component>
</div>
<script src="scripts/vue.js"></script>
<script>
    Vue.component(‘my-component‘,{
        template:`<p class="foo bar">hi</p>`
    })
    new Vue({
        el:"#demo",
        data:{
            isActive:true
        }
    })
    //当 isActive 为 true 的时候，HTML 将被渲染成为:<p class="foo bar active">Hi</p>
</script>

（2）       绑定内联样式

对象语法：

<div id="demo">
    <div v-bind:style="{color:activeColor,fontSize:fontSize + ‘px‘}">hi</div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            activeColor:‘red‘,
            fontSize:26
        }
    })
</script>

<div id="demo">
    <div v-bind:style="styleObject">hi</div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            styleObject:{
                activeColor:‘red‘,
                fontSize:26
            }
        }
    })
</script>

数组语法：可以将多个样式应用到一个元素上

<div id="demo">
    <div v-bind:style="[baseStyles,overridingStyles]">hi</div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            baseStyles:{
                activeColor:‘red‘,
                fontSize:26
            },
            overridingStyles:{
                activeColor:‘green‘,
                backgroundColor:‘grey‘
            }
        }
    })
</script>

六 条件渲染

（1）v-if

<div id="demo">
    <p v-if="seen">you can see me</p>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            seen:true
        }
    })
</script>

 <div id="demo">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
  </div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            ok:false
        }
    })
</script>

（2）<template>中v-if条件组

<div id="demo">
   <template v-if="ok">
       <h1>Title</h1>
       <p>Paragraph</p>
       <p>Paragraph</p>
   </template>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            ok:true
        }
    })
</script>

（3）v-else

<div id="demo">
    <div v-if="Math.random() > 0.5">Sorry</div>
    <div v-else>not sorry</div>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo"
    })
</script>

（4）v-show简单的切换元素的css属性display

<div id="demo">
    <h1 v-show="ok">hello</h1>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el:"#demo",
        data:{
            ok:true
        }
    })
</script>

Ps：

v-if，真实的条件渲染，确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。V-if是惰性的，即在初始渲染条件为假时，什么也不做，在条件第一次变为真时才开始局部编译。更高的切换消耗。

v-show，元素始终被编译并保留，只是简单的基于css切换。更高的初始渲染消耗。

Ps：当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

七 列表渲染

ps：文中例子来源于vue官网  https://vuefe.cn/v2/guide/

ps：未完待续。。。

时间： 2024-08-04 08:25:24

vue实例整理1的相关文章

vue实例

一.构造器 每个vue应用都是通过构造函数vue创建一个vue的根实例启动的 var MyComponent=Vue.extend({ //扩展选项})var myComponentInstance=new MyComponent() 二.属性和方法 每个vue实例都会代理其data对下里所有的属性: var data={a:1}var vm=new VUe({ data:data})vm.a===data.a //truevm.a=2data.a //2data.a=3vm.a //3 只有这

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的

vue学习笔记（四）——Vue实例以及生命周期

1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM |   |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.) |   |-------template (一个字符串模板作为 Vue 实例的标识使用.模板将会 替换 挂载的元素.挂载元素的内容都将被忽略,除非模板的内容有分发 slot.) |   |-------render (字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.) |---

vue.js开发环境搭建以及创建一个vue实例

Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境: 1.首先,我们需要安装 node.js: 安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm

vue实例-学习

构造器: 每个vue.js应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ //选项 }) 虽然没有完全遵循 MVVM模式 ,Vue的设计无疑受到了它的启发.因此在文档中经常会使用vm这个变量名表示Vue实例. 在实例化Vue时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项.全部选项可去看API. 可以扩展Vue构造器,从而用预定义选项创建可复用的组件构造器: var

VUE实例 -- 洗牌

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>VUE实例洗牌</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script&g

vue实例生命周期详解

每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会.例如,created 这个钩子在实例被创建之后被调用 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log

聊一聊Vue实例与生命周期运行机制

Vue的实例是Vue框架的入口,担任MVVM中的ViewModel角色,所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个过程中,事件钩子可以辅助我们对整个实例生成.编译.挂载.销毁等过程进行js控制,给我们提供了执行自定义逻辑的机会.所以学习实例的生命周期,能帮助我们理解vue实例的运行机制,更

Vue实例生命周期

前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即