1、vue2.0入门

前言：

1.阅读官方文档教程 https://cn.vuejs.org/v2/guide/

2.阅读官方api文档https://cn.vuejs.org/v2/api/

 

一、vue的基本知识点

1.vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

 

2.vue的创建

创建实例

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

界面显示

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

界面就会显示Hello Vue!

3.绑定元素之单向绑定v-bind

除了使用{{变量名}}绑定元素之外，还可以使用v-bind

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

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

 

v-bind    缩写 : 

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

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
 
<!-- 缩写 -->
<img :src="imageSrc">
 
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
 
<!-- 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>
 
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
 
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
 
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
 
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

 

---

 

 

4.绑定元素之双向绑定v-model

v-model在表单控件或者组件上创建双向绑定。

 

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

 

 

5.条件控制v-if

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

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

 v-if配合true或者false的变量来控制显示隐藏

 

6.循环输出v-for

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

v-for可以动态生成控件列表

注：app4.todos.push({ text: '新项目' })可以追加数组元素

 

7.点击事件v-on

v-on:click一般缩写成@click

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>

  <button @click="reverseMessage">逆转消息2</button>

 </div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

 

---

 

 

二、vue的组件化

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "props"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

"props"可以理解继承财产，继承来自父组件传递下来的名为todo的数据资产，继承之后就可以使用了，{{ todo.text }}


父组件是怎么传递数据资产的呢？

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in propertyList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

 
资产有哪些

var app7 = new Vue({
  el: '#app-7',
  data: {
    propertyList: [
      { id: 0, text: '存款' },
      { id: 1, text: '房产' },
      { id: 2, text: '豪车' }
    ]
  }
})