Vue.JS学习笔记

2017-08-03 本文已影响32人高调的小丑

简介

Vue.js是目前比较火的轻量级的前端框架之一。是一套构建用户界面的渐进式框架。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

var newVue=new Vue({
    el:'#demo',
    data:{
        name:'curry',
        age:18,
    },
    create:function(){
        console.log("hello,"+this.name);
    },
    methods:{
        showMsg(){
            console.log("hello,"+this.name);
        },
    },
})

Vue包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项。不同的实例选项拥有不同的功能，如：

el表明我们的Vue需要操作哪一个元素下的区域，’#demo’表示操作id为demo的元素下区域。
data表示Vue 实例的数据对象，data 的属性能够响应数据的变化。
created表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。

指令

v-text

v-text: 用于更新绑定元素中的内容

<div v-text="text"></div>
//两者一样
<div>{{text}}</div>

v-html

v-html: 用于更新绑定元素中的html内容

<div v-html="html"></div>

一般情况下不会再页面使用html插入，以防止xss攻击。

v-show

v-show：根据表达式之真假值，切换元素的display CSS 属性

<div v-show=true>显示我</div>

v-if、v-else、v-else-if

根据表达式的值的真假条件渲染元素

//根据随机值来进行显示不同的内容
<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-for

v-for是以item in items的形式的特殊语法，常用来绑定数据到数组来渲染一个列表

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: '张三' },
      { name: '李四' },
      { name: '王五' }
    ]
  }
})
</script>

也可以将第二个参数作为键名

<li v-for="(value, key) in object">
    {{ key }} : {{ value }}
</li>

第三个参数为索引

<li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
</li>

v-on

v-on：绑定事件监听器

<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

v-bind

v-bind:动态地绑定一个或多个特性，或一个组件 prop 到表达式。

<!-- 绑定一个属性 -->
![](imageSrc)

<!-- 缩写 -->
![](imageSrc)

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

v-model

v-model:随表单控件类型不同而不同。只有<input>
、<select>
、<textarea>
、components可以使用。

用于表单控件绑定。

<input v-model="remark"></input>

修饰符：

.lazy - 取代 input 监听 change 事件

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number - 输入字符串转为数字(如果原值的转换结果为 NaN 则返回原值)

<input v-model.number="age" type="number">

.trim - 输入首尾空格过滤

<input v-model.trim="msg">

v-once

v-once：只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>