Vue.js - VUE集合 - 《前端学习》

CDN
声明式渲染
- 指令
- el 参数挂载点
- data 定义属性
- methods 定义函数
- {{}} 输出和返回
插值
- 文本
- HTML—v-html
- 属性
- 表达式
指令
- 参数
- 修饰符
- 用户输入
- 过滤器
缩写
- v-bind
- v-on
条件语句
- v-if
- v-else
- v-else-if
- v-show
循环语句
- v-for
- v-for 迭代对象
计算属性
- computed
- computed vs methods
- computed属性默认只有getter，不过在需要的时候，也可以提供一个setter
监听属性
- 理解watch
样式绑定
- class属性绑定
- 数组语法
- style（内联样式）
事件处理器
- 事件修饰符
- 按键修饰符
表单
- 实例-对input元素和textarea元素使用双向数据绑定
- 实例-复选框
- 实例-单选框
- 实例-select列表
- 修饰符
组件
- 全局组件
- 局部组件
- Prop
- 动态 Prop
- Prop验证❌
组件-自定义事件❗
自定义指令
v-text
v-html
v-bind
v-if
v-else
v-else-if
v-on
v-model
v-show
v-for
v-pre
v-once
watch
数组语法
双向数据绑定 two way data binding
过滤器 filter
实例生命周期

渐进式框架 自底层向上逐层应用

CDN

<!-- Staticfile CDN -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- unpkg（推荐） -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

声明式渲染

Vue.js核心是一个允许采用简洁模板语法来声明式地将数据渲染进DOM的系统

数据和DOM建立关联。响应式

一个Vue应用会被挂载到一个DOM元素上，然后对其进行完全控制
每个Vue应用都需要通过实例化Vue来实现.
当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这些属性的值发生干煸时，html视图也会发生相应改变
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据

指令

指令带有前缀v-，Vue提供的特殊属性，会在渲染的DOM上应用特殊的响应式行为

el 参数挂载点

它是DOM元素中的id。

data 定义属性

用于定义属性

methods 定义函数

用于定义的函数，通过return来返回函数值

{{}} 输出和返回

用于输出对象属性和函数返回值

插值

文本

{{ }} 双大括号

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '寄了'
  }
})
</script>
</body>
</html>

HTML—v-html

v-html指令用于设置元素的innerHTML 内容中有HTML结构会被解析为标签

实例-输出的是渲染好的h1格式的”带标题”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>带标题</h1>'
  }
})
</script>
</body>
</html>

属性

v-bind指令主要用于属性绑定下例就是绑定了class，如果checkbox被选中，则div应用class1的样式。

判断use的值，如果为true则使用class1类的样式，否则不使用该类：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  </head>
  <style>
    .class1 {
      background: #444;
      color: #eee;
    }
  </style>
  <body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="app">
      <label for="r1">修改颜色</label
      ><input type="checkbox" v-model="use" id="r1" /> <br /><br />
      <div v-bind:class="{'class1': use}">v-bind:class 指令</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          use: false,
        },
      });
    </script>
  </body>
</html>

表达式

提供了完全的JavaScript表达式支持

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      {{5+5}}<br />
      {{ ok ? 'YES' : 'NO' }}<br />
      {{ message.split('').reverse().join('') }}
      <div v-bind:id="'list-' + id">菜鸟教程</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          ok: true,
          message: "RUNOOB",
          id: 1,
        },
      });
    </script>
  </body>
</html>

指令

指令是带有v-前缀的特殊属性用于在表达式的值改变时，将某些行为应用到DOM上

实例
v-if指令会根据表达式seen的值来决定是否插入p元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-if="seen">现在你看到我了</p>
      <template v-if="ok">
        <h1>菜鸟教程</h1>
        <p>学的不仅是技术，更是梦想！</p>
        <p>哈哈哈，打字辛苦啊！！！</p>
      </template>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          seen: true,
          ok: true,
        },
      });
    </script>
  </body>
</html>

参数

参数在指令后用冒号指明

v-bind指令用来将这个元素的href属性与表达式url的值绑定。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <pre><a v-bind:href="url">菜鸟教程</a></pre>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          url: "http://www.runoob.com",
        },
      });
    </script>
  </body>
</html>

修饰符

修饰符是以.指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。

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

用户输入

用v-model指令在input输入框中，实现双向数据绑定 v-model指令用在 input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message" />
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "Runoob!",
        },
      });
    </script>
  </body>
</html>

也可以使用v-on指令来对用户的输入进行响应。

实例——字符串反转

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">反转字符串</button>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "Runoob!",
        },
        methods: {
          reverseMessage: function () {
            this.message = this.message.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

过滤器

Vue允许自定义过滤器，用于常见文本格式化。

语法

<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
{{ message | filterA | filterB }}

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>

缩写

v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on

为元素绑定事件可简写为@ 方法内部可以通过this关键字可以访问定义在data中数据

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

条件语句

v-if

条件判断使用v-if指令,根据表达式seen的值来决定是否插入p元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>
</body>
</html>

v-else

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="Math.random() > 0.5">Sorry</div>
      <div v-else>Not sorry</div>
    </div>
    <script>
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

v-else-if

用作v-if的else-if块可以链式的多次使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <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>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          type: "B",
        },
      });
    </script>
  </body>
</html>

v-show

v-show指令根据条件展示元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 v-show="ok">Hello!</h1>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          ok: true,
        },
      });
    </script>
  </body>
</html>

循环语句

v-for

根据数据生成列表结构语法：（item，index）in 数据 item和index可以和其他指令一起使用数组长度的更新会同步到页面上，为响应式的特殊语法：site in sites site是源数据数组，site是数组元素迭代的别名。 v-for可以绑定数据到数组来渲染一个列表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-for 实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <li v-for="A in B">{{ A.name }}</li>
      </ol>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          B: [
            { name: "春" },
            { name: "夏" },
            { name: "秋" },
            { name: "冬" },
          ],
        },
      });
    </script>
  </body>
</html>

在模板中使用v-for

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
</body>
</html>

v-for 迭代对象

通过一个对象的属性来迭代数据有三个参数

value属性
key参数
index索引

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(value, key, index) in object">
          {{ index }}. {{ key }} : {{ value }}
        </li>
      </ul>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          object: {
            name: "菜鸟教程",
            url: "http://www.runoob.com",
            slogan: "学的不仅是技术，更是梦想！",
          },
        },
      });
    </script>
  </body>
</html>

计算属性

computed用于处理一些复杂逻辑

computed

实例-反转字符串

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>

computed vs methods

两者效果一样

但computed是基于它的依赖缓存，只有相关依赖发生变化时才重新取值。
而使用methods，在重新渲染的时候，函数总会重新调用执行。

computed性能会更好，但不希望缓存的时候可以选择使用methods属性。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
      <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          message: "Runoob!",
        },
        computed: {
          // 计算属性的 getter
          reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split("").reverse().join("");
          },
        },
        methods: {
          reversedMessage2: function () {
            return this.message.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

computed属性默认只有getter，不过在需要的时候，也可以提供一个setter

<!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>{{ site }}</p>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          name: "Google",
          url: "http://www.google.com",
        },
        computed: {
          site: {
            // getter
            get: function () {
              return this.name + " " + this.url;
            },
            // setter
            set: function (newValue) {
              var names = newValue.split(" ");
              this.name = names[0];
              this.url = names[names.length - 1];
            },
          },
        },
      });
      // 调用 setter， vm.name 和 vm.url 也会被对应更新
      vm.site = "八嘎呀路 http://www.runoob.com";
      document.write("name: " + vm.name);
      document.write("<br>");
      document.write("url: " + vm.url);
    </script>
  </body>
</html>

监听属性

通过watch来响应数据的变化

理解watch

var vm=new Vue({
    el:'#app'，
    data:{
        一个数据:''
    },
    watch:{
        //这个函数有两个参数
        //newVal改变后的值
        //oldVal改变前的值
        '一个数据':fuction(){
            //对数据变化后进行处理
        },
        '$route.path':fuction(){
            //对Vue实例中存放的对象进行监听
            //数据变化后进行处理
            //！！只要能够获取的对象，都能被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>

样式绑定

利用v-bind指令设置样式属性。 v-bind在处理结果class和stylee时，表达式的结果类型除了字符串之外，还可以是对象或数组。

class属性绑定

可以在对象中传入更多属性用来切换多个class

 <div id="app">
      <div
        class="static"
        v-bind:class="{ 'active': isActive, 'text-danger': hasError }"
      ></div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          isActive: true,
          hasError: false,
        },
      });
    </script>

也可以直接绑定数据里的一个对象

<div id="app">
      <div v-bind:class="classObject"></div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          classObject: {
            active: true,
            "text-danger": true,
          },
        },
      });
    </script>

数组语法

可以把数组传给v-bind:class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

也可以使用三元表达法来切换列表中的class

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
      .text-danger {
        width: 100px;
        height: 100px;
        background: red;
      }
      .active {
        width: 100px;
        height: 100px;
        background: green;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          isActive: false,
          activeClass: "active",
          errorClass: "text-danger",
        },
      });
    </script>
  </body>
</html>

style（内联样式）

直接设置样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
        菜鸟教程
      </div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          activeColor: "green",
          fontSize: 60,
        },
      });
    </script>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-bind:style="styleObject">菜鸟教程</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          styleObject: {
            color: "green",
            fontSize: "30px",
          },
        },
      });
    </script>
  </body>
</html>

也可以使用数组将多个样式对象应用到一个元素上

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          baseStyles: {
            color: "green",
            fontSize: "30px",
          },
          overridingStyles: {
            "font-weight": "bold",
          },
        },
      });
    </script>
  </body>
</html>

事件处理器

事件监听使用v-on指令

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <button v-on:click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          counter: 0,
        },
      });
    </script>
  </body>
</html>

v-on也可以接收一个定义的发来调用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>

也可以使用内联Js语句

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    <script>
      new Vue({
        el: "#app",
        methods: {
          say: function (message) {
            alert(message);
          },
        },
      });
    </script>
  </body>
</html>

事件修饰符

提供给v-on来处理DOM事件细节通过由.表示的指令后缀来调用修饰符

.stop - 阻止冒泡-不会一直传递，自己运行结束就结束了。
.prevent - 阻止默认事件-比如submit加了这个就不会提交了
.capture - 阻止捕获-在传递的父子事件中，加了这个，无论先点哪个，都先执行这个
.self - 只监听触发该元素的事件-只有点击自己本身才会执行，点子元素也不会传递
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

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

按键修饰符

vue允许v-on在监听键盘事件时添加按键修饰符

按键别名

.enter.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

表单

使用v-model指令在表单元素上创建双向数据绑定

实例-对input元素和textarea元素使用双向数据绑定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>input 元素：</p>
      <input v-model="message" placeholder="编辑我……" />
      <p>消息是: {{ message }}</p>
      <p>textarea 元素：</p>
      <p style="white-space: pre">{{ message2 }}</p>
      <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "Runoob",
          message2: "菜鸟教程\r\nhttp://www.runoob.com",
        },
      });
    </script>
  </body>
</html>

实例-复选框

多个复选框可绑定同一数组

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>单个复选框：</p>
      <input type="checkbox" id="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label>
      <p>{{ checked }}</p>
      <p>多个复选框：</p>
      <input
        type="checkbox"
        id="runoob"
        value="Runoob"
        v-model="checkedNames"
      />
      <label for="runoob">Runoob</label>
      <input
        type="checkbox"
        id="google"
        value="Google"
        v-model="checkedNames"
      />
      <label for="google">Google</label>
      <input
        type="checkbox"
        id="taobao"
        value="Taobao"
        v-model="checkedNames"
      />
      <label for="taobao">Taobao</label>
      <br />
      <input type="checkbox" value="baga" v-model="checkedNames" />
      <label for="baga">baga</label>
      <br />
      <span>选择的值为: {{ checkedNames }}</span>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          checked: true,
          checkedNames: [],
        },
      });
    </script>
  </body>
</html>

实例-单选框

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="radio" id="runoob" value="Runoob" v-model="picked" />
      <label for="runoob">Runoob</label>
      <br />
      <input type="radio" id="google" value="Google" v-model="picked" />
      <label for="google">Google</label>
      <br />
      <span>选中值为: {{ picked }}</span>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          picked: "Runoob",
        },
      });
    </script>
  </body>
</html>

实例-select列表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selected" name="fruit">
        <option value="">选择一个网站</option>
        <option value="www.runoob.com">Runoob</option>
        <option value="www.google.com">Google</option>
      </select>
      <div id="output">选择的网站是: {{selected}}</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          selected: "",
        },
      });
    </script>
  </body>
</html>

修饰符

.lazy

默认情况下，v-model是在input事件触发后将输入框的值与数据进行同步
而在添加lazy修饰符之后，会转变为在change事件之后进行同步

.number

自动将用户的输入值转为数值类型，因为即使在 type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析，则会返回原始的值。

.trim

自动过滤用户输入的首尾空白字符

组件

组件可以扩展HTML元素，封装可重用的代码组件系统可以让我们用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树语法：

Vue.component(tagName, options)

tagName为组件名，option为配置选项

全局组件

所有实例都能使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <runoob></runoob>
      <runoob></runoob>
    </div>
    <div id="ppa">
        <runoob></runoob>
        <runoob></runoob>
    </div>
    <script>
      // 注册
      Vue.component("runoob", {
        template: "<h1>自定义组件!</h1>",
      });
      // 创建根实例
      new Vue({
        el: "#app",
      });
      new Vue({
          el:"#ppa",
      });
    </script>
  </body>
</html>

局部组件

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <runoob></runoob>
      <runoob></runoob>
    </div>
    <div id="ppa">
        <runoob></runoob>
        <runoob></runoob>
    </div>
    <script>
      var Child = {
        template: "<h1>自定义组件!</h1>",
      };
      // 创建根实例
      new Vue({
        el: "#app",
        components: {
          // <runoob> 将只在父模板可用
          runoob: Child,
        },
      });
      new Vue({
        el: "#ppa",
      });
    </script>
  </body>
</html>

Prop

prop是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过props把数据传给子组件，子组件需要显式地用 props选项声明”prop”

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>

动态 Prop

类似于v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据当中。每当父组件的数据变化时，该变化也会传导给子组件 porp是单向绑定的，当父组件属性边变化时，将传导给子组件，但不会反过来

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <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: "<h1>{{ message }}</h1>",
      });
      // 创建根实例
      new Vue({
        el: "#app",
        data: {
          parentMsg: "八嘎",
        },
      });
    </script>
  </body>
</html>

使用v-bind指令将todo传到每一个重复的组件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
    </div>
    <script>
      Vue.component("todo-item", {
        props: ["todo"],
        template: "<li>{{ todo.text }}</li>",
      });
      new Vue({
        el: "#app",
        data: {
          sites: [{ text: "Runoob" }, { text: "Google" }, { text: "Taobao" }],
        },
      });
    </script>
  </body>
</html>

Prop验证❌

组件可以为props指定验证要求可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数字组。

组件-自定义事件❗

父组件是用props传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件。

自定义指令

允许注册自定义指令自定义指令解决的问题是对普通DOM元素进行底层操作。 Vue.directive

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>页面载入时，input 元素自动获取焦点：</p>
      <input v-focus />
    </div>
    <script>
      // 注册一个全局自定义指令 v-focus
      Vue.directive("focus", {
        // 当绑定元素插入到 DOM 中。
        inserted: function (el) {
          // 聚焦元素
          el.focus();
        },
      });
      // 创建根实例
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

v-text

设置标签的内容（textContent）默认会替换所有内容，使用插值表达式可以替换指定内容内部也支持表达式

<div id="app">
        <!--  
            注意:在指令中不要写插值语法  直接写对应的变量名称 
            在 v-text 中 赋值的时候不要在写 插值语法
            一般属性中不加 {{}}  直接写 对应 的数据名 
        -->
        <p v-text="msg">312asda 31231 </p>
        <p>
            <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
            {{msg}}
        </p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue.js'
            }
        });
    </script>

v-html

输出html代码

v-bind

作用：为元素绑定属性写法：v-bind：属性名简写：省略v-bind，只保留：属性名需要动态的增删的class建议使用对象的方式

v-if

作用：根据表达式的真假切换元素的显示状态本质：是通过操纵DOM元素来切换显示状态表达式为true时，元素存在于dom树中，为false时，从dom树中移除频繁切换使用v-show，反之使用v-if，前者消耗小

v-else

v-else-if

链式使用

v-on

绑定事件
缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

v-model

实现双向数据绑定
监听用户数据输入事件以更新数据
表单应用

v-show

作用：根据真假切换元素的显示状态原理：就是修改元素的display来实现显示隐藏指令后面的内容，最终都会被解析为布尔值数据改变之后，对应元素的显示状态会同步更新

v-for

特殊语法：site in sites
绑定数据到数组来渲染一个列表
迭代对象
迭代整数-循环整数

v-pre

跳过这个元素和其子元素的编译过程。加快编译
用于显示原始的Mustache 标签。

v-once

只渲染元素和组件一次。
随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
当数据改变时，插值处的内容不会更新
这可以用于优化更新性能。

watch

数组语法

<!-- 指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中  通常我们也把它叫做边界 数据只在边界内部解析-->
<div id="app">{{ msg }}</div>
<!-- 引入 vue.js -->
<script src="vue.js"></script>
<!-- 使用 vue -->
<script>
  var vm = new Vue({
    // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
    el: '#app',
    // Vue 实例的数据对象，用于给 View 提供数据
    data: {
      msg: 'Hello Vue'
    }
  })
</script>

双向数据绑定 two way data binding

过滤器 filter

文本数据格式化

VUE集合

CDN

声明式渲染

指令

el 参数 挂载点

data 定义属性

methods 定义函数

{{}} 输出和返回

插值

文本

HTML—v-html

属性

表达式

指令

参数

修饰符

用户输入

过滤器

缩写

v-bind

v-on

条件语句

v-if

v-else

v-else-if

v-show

循环语句

v-for

v-for 迭代对象

计算属性

computed

computed vs methods

computed属性默认只有getter，不过在需要的时候，也可以提供一个setter

监听属性

理解watch

样式绑定

class属性绑定

数组语法

style（内联样式）

事件处理器

事件修饰符

按键修饰符

表单

实例-对input元素和textarea元素使用双向数据绑定

实例-复选框

实例-单选框

实例-select列表

修饰符

.lazy

.number

.trim

组件

全局组件

局部组件

Prop

动态 Prop

Prop验证❌

组件-自定义事件❗

自定义指令

v-text

v-html

v-bind

v-if

v-else

v-else-if

v-on

v-model

v-show

v-for

v-pre

v-once

watch

数组语法

双向数据绑定 two way data binding

过滤器 filter

实例生命周期

el 参数挂载点