Vue学习笔记

来源：互联网发布：电脑连接不到网络编辑：程序博客网时间：2024/06/18 18:20

v-bind 绑定属性 缩写：’：’
v-once 指令，一次性地插值
v-html 指令渲染html元素
v-if 条件指令
v-for 循环指令
v-on 绑定事件监听器 缩写:@
v-model 双向绑定表单
注册组件

    // 定义名为 todo-item 的新组件    Vue.component('todo-item', {      template: <li>这是个待办项</li>    })    <ol>      <!-- 创建一个 todo-item 组件的实例 -->      <todo-item></todo-item>    </ol>

vue实例

扩展 Vue 构造器

var MyComponent = Vue.extend({  // 扩展选项})// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建var myComponentInstance = new MyComponent()

代理属性
每个 Vue 实例都会代理其 data 对象里所有的属性：

var data = { a: 1 }var vm = new Vue({  data: data})vm.a === data.a // -> true// 设置属性也会影响到原始数据vm.a = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3

实例属性和方法
这些属性与方法都有前缀 $，以便与代理的 data 属性区分

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 (newVal, oldVal) {  // 这个回调将在 `vm.a`  改变后调用})

生命周期

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

created 这个钩子在实例被创建之后被调用。还有其他的一些钩子如 mounted、updated、destroyed

模版语法

纯html v-html

使用js表达式

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>

修饰符
以半角句号 . 指明的特殊后缀
<form v-on:submit.prevent="onSubmit"></form>
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

过滤器
Vue 2.x 中，过滤器只能用在 mustache 绑定和 v-bind 表达式

<!-- in mustaches -->{{ message | capitalize }}<!-- in v-bind --><div v-bind:id="rawId | formatId"></div>

缩写
v-bind 和 v-on

计算属性

基础例子

<div id="example">  <p>Original message: "{{ message }}"</p>  <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({  el: '#example',  data: {    message: 'Hello'  },  computed: {    // a computed getter    reversedMessage: function () {      // `this` points to the vm instance      return this.message.split('').reverse().join('')    }  }})

computed 下的属性，叫做计算属性

计算属性和 Methos 比较
```
<p>Reversed message: "{{ reversedMessage() }}"</p>// in componentmethods: {  reversedMessage: function () {    return this.message.split('').reverse().join('')  }}
```
计算属性是基于它们的依赖进行缓存的,只有依赖属性发生改变，计算属性才被调用，否则使用缓存值。而Method每次重新渲染都会调用。

计算的setter属性

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

默认只有getter属性。

watch属性的比较
应用场景：网易云音乐的搜索框，watch搜索框的值然后ajax查询数据

绑定 class和style

绑定class

1.传递一个对象
<div v-bind:class="{ active: isActive }"></div>
sActive是一个数据(代理)属性

绑定一个数据对象

 <div v-bind:class="classObject"></div>    data: {      classObject: {        active: true,        'text-danger': false      }    }

3. 传递数据列表

 <div v-bind:class="[activeClass, errorClass]">    data: {      activeClass: 'active',      errorClass: 'text-danger'    }

绑定style

绑定js对象

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: {  activeColor: 'red',  fontSize: 30}

或者

```<div v-bind:style="styleObject"></div>data: {  styleObject: {    color: 'red',    fontSize: '13px'  }}```

绑定数组和上面的一样

条件渲染

v-if v-else v-else-if

<div v-if="type === 'A'">  A</div><div v-else-if="type === 'B'">  B</div><div v-else-if="type === 'C'">  C</div><div v-else>  Not A/B/C</div>

key 标志元素是唯一的

<template v-if="loginType === 'username'">  <label>Username</label>  <input placeholder="Enter your username" key="username-input"></template><template v-else>  <label>Email</label>  <input placeholder="Enter your email address" key="email-input"></template>

列表渲染

v-for

有索引的循环
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
循环template
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul>

循环对象

<ul id="repeat-object" class="demo">  <li v-for="value in object">    {{ value }}  </li></ul><!-- 键值对 --><div v-for="(value, key) in object">  {{ key }} : {{ value }}</div><!-- 索引 --><div v-for="(value, key, index) in object">  {{ index }}. {{ key }} : {{ value }}</div>

结合v-if使用
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>

key

<div v-for="item in items" :key="item.id">  </div>
并没有特别理解，回头再看看

数组

一些数组方法：push pop shift unshift splice  sort reversefilter concat slice

事件处理 v-on

普通用法

<div id="example-2">  <!-- `greet` 是在下面定义的方法名 -->  <button v-on:click="greet">Greet</button></div>var example2 = new Vue({  el: '#example-2',  data: {    name: 'Vue.js'  },  // 在 `methods` 对象中定义方法  methods: {    greet: function (event) {    }  }});

传入原生事件

<button v-on:click="warn('Form cannot be submitted yet.', $event)">  Submit</button>methods: {  warn: function (message, event) {    // 现在我们可以访问原生事件对象    if (event) event.preventDefault()    alert(message)  }}

事件修饰符
.stop .prevent .capture .self .once

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><div v-on:click.capture="doThis">...</div><!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 --><div v-on:click.self="doThat">...</div>

键值修饰符 keyup
.enter .tab .delete .esc .space .up .down .left .right
```
<input v-on:keyup.enter="submit"><input @keyup.enter="submit">
```
可以通过全局 config.keyCodes 对象自定义键值修饰符别名：
Vue.config.keyCodes.f1 = 112
监听组合键
.ctrl .alt .shift .meta

<!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>

表单绑定

基础用法

<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span><p style="white-space: pre-line">{{ message }}</p><br><textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框

<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>

单选

<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label>

下拉框

<select v-model="selected">    <option disabled value="">请选择</option>    <option>A</option>    <option>B</option>    <option>C</option>  </select>  <span>Selected: {{ selected }}</span>  new Vue({  el: '...',  data: {    selected: ''  }})

多列选择，在select标签中加入multiple属性。

使用v-for动态加载数据

<select v-model="selected">  <option v-for="option in options" v-bind:value="option.value">    {{ option.text }}  </option></select><span>Selected: {{ selected }}</span>options: [  { text: 'One', value: 'A' },  { text: 'Two', value: 'B' },  { text: 'Three', value: 'C' }]

修饰符
.lazy .number .trim

阅读全文

0 0