2018-05-02 Vue入门

作者: 彭奕泽 | 来源:发表于2018-05-28 18:03 被阅读0次

2018-05-02 Vue入门
Vue 入门到实战课程
VUE系列教程目录
VUE系列教程目录
01vue-安装vue
Vue.js状态管理工具Vuex快速上手
Vue2简单入门
Vue.js再入门
Vue.js使用vue-router构建单页应用
vue基础入门

1. 安装

2. 介绍

1. 声明式渲染

v-bind 、简写 :（一个冒号）

<html>
  <div id="app">
    {{ message }}
  </div>

  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</html>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

这样{{ message }}就被替换成Hello Vue!

2. 条件与循环

v-if
v-for

<html>
  <div id="app-2">
    <p v-if="seen">现在你看到我了</p>

    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}  //页面会显示三个li
      </li>
    </ol>
  </div>
</html>

<script>
  var app2 = new Vue({
    el: '#app-2',
    data: {
      seen: true,  //只要为真值即可
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
})
</script>

可以用app2.todos.push({ text: '新项目' })添加

3. 事件监听

v-on: 、简写 @
v-model

<div id="app-3">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
    //缩写 @click="......"

  <input v-model="message">
  //改input里的值同时可以改message
</div>

<script>
  var app3 = new Vue({
    el: '#app-3',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })
</script>

3.Vue实例

创建vue实例

let vm = new Vue({})

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

<script>
  let obj = {
    foo: 'bar'
  }

  Object.freeze(obj)

  new Vue({
    el: '#app',
    data: obj
  })
</script>

<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

钩子
created:在一个实例被创建之后执行代码
```
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
  console.log('a is: ' + this.a)
  }
})
// => "a is: 1" 
```
还有mouted,updated,destroyed，生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())，不然可能会导致this出错

4. 模版语法

v-once，一次性插值

<span v-once>这个将不会改变: {{ msg }}</span>

但请留心这会影响到该节点上的其它数据绑定

v-html
data.rawHtml === <b>hi</b>
<p>{{ rawHtml }}</p>显示在页面中是<b>hi</b>。
要加上<p v-html="rawHtml"></p>，页面才会显示html内容。
但是你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。所以绝不要对用户提供的内容使用插值。

修饰符

<form v-on:submit.prevent="onSubmit">...</form>

意思就是event.preventDefault()

5. 组件

<script>
  Vue.component('xxx',{
    props:['name'],  //这样组件可以用别人的属性
    template: `<h1> {{name}} </h1>`,
    data(){  //data必须这样写
      return {
        message: 'hi'
      }
    }
  })

  new Vue({
    el: '#app',
    data:{
      people: 'pyz'
    }
  })
</script>

<html>
  <div id="app">
    <xxx :name="people"></xxx>
  </div>
</html>

6. 计算属性

<html>
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</html>

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

计算属性的功能也可以用methods代替，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，不会再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
watch:当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是 watch

<html>
<div id="demo">{{ fullName }}</div>
</html>

<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
    }
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
</script>

7. class与style绑定

<div v-bind:class="{ active: isActive }"></div>
//如果isActive为真，则class存在

v-bind:class也可以和普通class并存，而且也可以绑定一个对象

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

更可以绑定一个返回对象的计算属性

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

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

对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

8. 绑定内联样式

对象语法

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

数组语法

9. 条件渲染

v-if
若想一次性切换多个元素
```
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
```
用一个template包裹，这样最终渲染结果不包含<template>
v-else
```
<h1 v-if="ok" v-cloak>Yes</h1>
<div v-else-if="type === 'C'">C</div>
<h1 v-else v-cloak>No</h1>
```
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

用key管理可复用的元素

<html>
  <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>
</html>

这样用户在切换登陆方式时，input会刷新，但label会被复用，这样提高了效率，若想input也复用可以去掉key

v-show
v-show不同的是，v-show始终会渲染元素，只是切换它的display属性而已，所以如果需要非常频繁的切换，用v-show比较好

10. 列表渲染

1. 数组

<html>
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>
</html>

<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

结果：

0 - Foo
1 - Bar

2. 对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

用对象的第二个参数是键名

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

firstName: John
lastName: Doe
age: 30

第三个参数是索引(index)

3. key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key

4. 注意事项

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如：vm.items.length = newLength
第一项可以这样解决
```
vm.$set(vm.items, indexOfItem, newValue)
```
第二项可以这样解决
```
vm.items.splice(newLength)
```

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

所以可以用如下方式添加新属性

vm.$set(vm.userProfile, 'age', 27)

若要一次性赋予多个新属性，可以这样

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

5. 用计算属性进行列表渲染

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

计算属性用不了时可以用method

<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

v-for若取整数，则打出1~这个整数

<span v-for="n in 10">{{ n }} </span>

2018-05-02 Vue入门
1. 安装 2. 介绍 1. 声明式渲染 v-bind 、简写 :（一个冒号）这样{{ message }}就...
Vue 入门到实战课程
Vue 入门到实战课程说明课程 VueCli3.0-小白入门 Vue2.0 小白入门教程 Vue 项目实战在...
VUE系列教程目录
VUE系列教程目录 vue入门之路篇系列教程： vue最简单的入门教程+实战+Vue2+VueRouter2+we...
VUE系列教程目录
VUE系列教程目录 vue入门之路篇系列教程：vue最简单的入门教程+实战+Vue2+VueRouter2+web...
01vue-安装vue
资源 1.Vue.js2.0从入门到放弃---入门实例（一）2.Vue.js入门学习（一）3.Vue官方中文Api...
Vue.js状态管理工具Vuex快速上手
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
Vue2简单入门
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
Vue.js再入门
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
Vue.js使用vue-router构建单页应用
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
vue基础入门
vue基础入门

2018-05-02 Vue入门

1. 安装

2. 介绍

1. 声明式渲染

2. 条件与循环

3. 事件监听

3.Vue实例

4. 模版语法

5. 组件

6. 计算属性

7. class与style绑定

8. 绑定内联样式

9. 条件渲染

10. 列表渲染

1. 数组

2. 对象

3. key

4. 注意事项

5. 用计算属性进行列表渲染

相关文章

2018-05-02 Vue入门

Vue 入门到实战课程

VUE系列教程目录

VUE系列教程目录

01vue-安装vue

Vue.js状态管理工具Vuex快速上手

Vue2简单入门

Vue.js再入门

Vue.js使用vue-router构建单页应用

vue基础入门

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读