Vue学习总结(全）

Vue项目的创建安装

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

Vue项目目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

Vue模块语句

插值表达式

数据绑定最常见的形式就是使用 { {…}}（双大括号）的文本插值：
使用 v-html 指令用于输出 html 代码
HTML 属性中的值应使用 v-bind 指令。缩写为 :
v-on 指令，它用于监听 DOM 事件。缩写为 @
v-model 指令来实现双向数据绑定

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，.stop阻止事件冒泡，.prevent阻止默认事件发生

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

<div id="app">
  {
   
   { message | capitalize }}
</div>
    
<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    message: 'runoob'
  },
  filters: {
     
     
    capitalize: function (value) {
     
     
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

条件判断

<div id="app">
    <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>
    <h1 v-show="ok">Hello!</h1>
</div>
    
<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    type: 'C',
    ok: 'true'
  }
})
</script>

我们也可以使用 v-show 指令来根据条件展示元素

循环语句

v-for 可以绑定数据到数组来渲染一个列表：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {
   
   { site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    sites: [
      {
     
      name: 'Runoob' },
      {
     
      name: 'Google' },
      {
     
      name: 'Taobao' }
    ]
  }
})
</script>

v-for 可以通过一个对象的属性来迭代数据：

<div id="app">
  <ul>
    <li v-for="value in object">
    {
   
   { value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    object: {
     
     
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

提供第二个的参数为键名：

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

第三个参数为索引：

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

v-for 也可以循环整数：

<div id="app">
  <ul>
    <li v-for="n in 10">
     {
   
   { n }}
    </li>
  </ul>
</div>

计算属性

计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。

<div id="app">
  <p>原始字符串: {
   
   { message }}</p>
  <p>计算后反转字符串: {
   
   { reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
     
     
  el: '#app',
  data: {
     
     
    message: 'Runoob!'
  },
  computed: {
     
     
    // 计算属性的 getter
    reversedMessage: function () {
     
     
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

实例中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

监听属性（watch）

我们可以通过 watch 来响应数据的变化，以下实例通过使用 watch 实现计数器：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
 <p style = "font-size:25px;">计数器: {
   
   { counter }}</p>
 <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
 var vm = new Vue({
     
     
    el: '#app',
    data: {
     
     
       counter: 1
    }
 });
 vm.$watch('counter', function(nval, oval) {
     
     
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
 });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
   <body>
      <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
	   <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
     
     
            el: '#computed_props',
            data: {
     
     
               kilometers : 0,
               meters:0
            },
            methods: {
     
     
            },
            computed :{
     
     
            },
            watch : {
     
     
               kilometers:function(val) {
     
     
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
     
     
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue) {
     
     
			// 这个回调将在 vm.kilometers 改变后调用
		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
      </script>
   </body>
</html>

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

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

实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示

我们也可以在对象中传入更多属性用来动态切换多个 class ：

<div class="static"
     v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>

我们可以把一个数组传给 v-bind:class：

<div v-bind:class="[activeClass, errorClass]"></div>

我们可以在 v-bind:style 直接设置内联样式：

<div id="app">
    <div v-bind:style="{
       
        color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

也可以直接绑定到一个样式对象，让模板更清晰：

<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    styleObject: {
     
     
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

事件处理器

事件监听可以使用 v-on 指令（内联）：

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {
   
   { counter }} 次。</p>
</div>
 
<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    counter: 0
  }
})
</script>

通常情况下，我们需要使用一个方法来调用 JavaScript 方法

<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
 
<script>
var app = new Vue({
     
     
  el: '#app',
  data: {
     
     
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
     
     
    greet: function (event) {
     
     
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
     
     
          alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>

事件修饰符

<!-- 阻止单击事件冒泡 -->
<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>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

表单

用 v-model 指令在表单控件元素上创建双向数据绑定，v-model 会根据控件类型自动选取正确的方法来更新元素

修饰符lazy在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

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

.number 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

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

.trim如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

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

组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

所有实例都能用全局组件。

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
     
     
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
     
     
  el: '#app'
})
</script>

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
     
     
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
     
     
  el: '#app',
  components: {
     
     
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
     
     
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{
     
     { message }}</span>'
})
// 创建根实例
new Vue({
     
     
  el: '#app'
})
</script>

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
     
     
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{
     
     { message }}</span>'
})
// 创建根实例
new Vue({
     
     
  el: '#app',
  data: {
     
     
    parentMsg: '父组件内容'
  }
})
</script>

结语

如果你发现文章有什么问题，欢迎留言指正。
如果你觉得这篇文章还可以，别忘记点个赞加个关注再走哦。
如果你不嫌弃，还可以关注微信公众号———梦码城（持续更新中）。
梦码在这里感激不尽！！