vue学习笔记

vue基础

通过下载的方式安装

  在官网下载开发版本文件后放入项目中，下载地址。通过script标签引入HTML中即可。

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

数据与方法

<!-- 视图部分 -->
<div id="app">
    {{ message }}
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

  文本插值方式：通过{{ }}在其中声明变量。当引入vue.js时，会生成一个全局变量Vue。可以通过new Vue的方式产生一个vue应用对象。

• el：代表element元素，通过ID选择器选中div。
• data：用于保存数据。当在视图中声明变量时，需要在data内注册并赋值。

生命周期钩子

  生命周期钩子需要写在new Vue的对象内，以属性的方式声明生命周期函数。注意：在生命周期函数中需要频繁应用this，因此不能使用箭头函数生成。
基础生命周期函数介绍：

1. beforeCreate
   在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。即整个页面创建之前的生命周期。
2. created
   在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
3. beforeMount
   在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted
   实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
5. beforeUpdate
   数据更新时调用。
6. updated
   组件 DOM 已经更新，组件更新完毕。

模板语法

  Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

插值

文本

  使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

  v-once 指令能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>此内容不会改变: {{ msg }}</span>

原始HTML

   v-html指令能够输出真正的 HTML。

<!-- 视图部分 -->
    <div id="app">
        <div id="example-1">
            <p>{{rawHtml}}</p>
            <p v-html='rawHtml'>{{name}}</p>
        </div>
    </div>
    <!-- 脚本部分 -->
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                rawHtml: "<span style='color:red'>This is should be red</span>",
                name: "UG"
            },
        })
    </script>

  span的内容将会被替换成为property 值 rawHtml，直接作为 HTML，会忽略解析property值中的数据绑定。

特性

  v-bind指令为HTML标签绑定属性。

<!-- 视图部分 -->
<div id="app">
    <div id="example-1">
        <div v-bind:class="color">test</div>
    </div>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'UG',
            color: 'blue'
        },
    })
</script>
<style type="text/css">
.red{color: red;}
.blue{color: blue; font-size: 100px;}
</style>

使用 JavaScript 表达式

  表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。

<!-- 视图部分 -->
<div id="app">
    <div id="example-1">
        <p>{{ number + 1 }}</p>
        <p>{{ ok ? 'YES' : 'NO' }}</p>
        <p>{{ message.split('').reverse().join('') }}</p>
    </div>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            name : 'UG',
            number : 10,
            ok : 1,
            message : 'vue',
        },
    })
</script>

指令

  指令 (Directives) 是带有v- 前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。例如v-if，当seen取值为true时，P标签被渲染；false时P标签没有被渲染。

<!-- 视图部分 -->
<div id="app">
    <p v-if='seen'>现在你看到我了</p>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            seen : true
            //seen : false
        },
    })
</script>

参数

  一些指令能够接收一个“参数”，在指令名称之后以冒号表示。v-bind用于动态绑定属性。

<!-- 视图部分 -->
<div id="app">
    <a v-bind:href="url">...</a>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            url : "https://blog.csdn.net/qq_43618583?spm=1001.2100.3001.5343",
        },
    })
</script>

修饰符

  修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。下例中stop后缀即为修饰符，指当前click事件执行完毕之后就会停下来，不会触发父元素事件。

<!-- 视图部分 -->
<div id="app">
    <div @click="click1">
        <div @click.stop="click2">
            click me
        </div>
    </div>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            click1 : function(){
                console.log('click1...');
            },
            click2 : function(){
                console.log('click2...');
            }
        }
    })
</script>

缩写

  v-bind缩写

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

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

  v-on缩写

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-cloak指令

  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<div v-cloak>
	{{ message }}
</div>
<style>
	[v-cloak] {
	display: none;
	}
</style>

计算属性

  在模板中放入太多的逻辑会让模板过重且难以维护。在计算属性函数进行命名时，一般不加动词，直接作为属性的名字，可以直接作为属性调用，后面不需要加括号。下面是计算属性与方法的对比：

<div id="app">
    <h2>{{firstName + ' ' + lastName}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{fullName}}</h2>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: 'Lebron',
            lastName: 'James'
        },
        computed: {
            fullName: function() {
                return this.firstName + ' ' + this.lastName
            }
        },
        methods: {
            getFullName() {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

Class 与 Style 绑定

  在v-bind用于class和style时，表达式结果的类型除了字符串之外，还可以是对象或数组。v-bind:class指令也可以与普通的class共存。

<!-- 视图部分 -->
<div id="app">
    <div
    class="test"
    v-bind:class="{ active: isActive , green : isGreen}"
    style="width: 200px; height: 200px; text-align: center; line-height: 200px;">
        hi vue
    </div>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            isActive : true,
            isGreen : true
        },
    })
</script>
<style>
    .test{font-size: 30px;}
    .active{background-color: red;}
    .green{color: green;}
</style>

条件渲染

  v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。当条件不满足时，元素不会被渲染到DOM上。
  v-show用于根据条件展示元素。其元素始终渲染并保留在DOM中，只是简单的切换元素的CSS显示属性display:none。
  一般来说，v-if有更高的切换开销，而v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用 v-if较好。

列表渲染

  v-for指令基于一个数组来渲染一个列表。v-for指令需要使用 item in items 形式的特殊语法，其中 items是源数据数组，而 item则是被迭代的数组元素的别名。
  为每项提供一个唯一的key，以便vue能跟踪每个节点的身份，从而重用和重新排序现有元素

<!-- 视图部分 -->
<div id="app">
    <ul>
		<li v-for="item, index in items" :key="index">
	    	{{index}}{{ item.message }}
		</li>
	</ul>
	<ul>
		<li v-for="key, value in object" :key="key">
	    	{{key}}：{{value}}
		</li>
	</ul>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
		    items: [
		        { message: 'Foo' },
		        { message: 'Bar' }
		    ],
		    object: {
				title: 'How to do lists in Vue',
		        author: 'Jane Doe',
		        publishedAt: '2016-04-10'
		    }
		}
    })
</script>

事件绑定

  v-on用于指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on指令中可以直接写入JS代码，也可以接收需要调用的函数名称。函数通过在初始化Vue对象时传递的对象参数内添加methods属性，然后在属性内声明函数及函数体。也可以用特殊变量 $event在内联语句处理器中访问原始的 DOM 事件。

<!-- 视图部分 -->
<div id="app">
    <div id="example-1">
        <button v-on:click="counter += 1">数值 ： {{ counter }}</button>
        <p>The button above has been clicked {{ counter }} times.</p>
        <button v-on:click="greet('abc', $event)">Greet</button>
    </div>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            counter: 0,
            name: "UG"
        },
        methods:{
            greet: function(str, ev){
                alert('hi');
                alert(this.name);
                alert(str);
                console.log(ev)
            }
        }
    })
</script>

表单输入绑定

  v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

<!-- 视图部分 -->
<div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <textarea v-model="message2" placeholder="add multiple lines"></textarea>
    <br>
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message2 }}</p>
    <br>

    <div>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>

    <div>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>
    <button type="button" @click='submit'>提交</button>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message : "test", //可以设置默认值
            message2 : "hi",
            checkedNames : ['Jack', 'John'], //复选框可能选中多个元素，用数组保存
            picked : "Two" //单选用字符串变量保存
        },
        methods: {
            submit : function () {
                var postObj = {
                    msg1 : this.message,
                    msg2 : this.message2,
                    checkval : this.checkedNames
                };
                console.log(postObj);
            }
        }
    })
</script>

组件基础

  组件是可复用的 Vue 实例，写代码时可以把经常重复的内容写入组件，使开发更加快捷。通过Vue.component()函数创建组件，其中第一个参数是组件的名称，第二个参数以对象的形式描述一个组件。因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的选项。
  组件在复用时，每用一次组件，就会有一个它的新实例被创建，数据相互不会影响。组件之中data必须是函数！

<!-- 视图部分 -->
<div id="app">
    <button-counter title="title1 :" @clicknow="clicknow"></button-counter>
    <button-counter title="title2 :"></button-counter>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
        props: ['title'],
        data: function () {
            return {
            count: 0
            }
    },
    template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}}You clicked me {{ count }} times.</button></div>',
    methods: {
        clickfun : function() {
            this.count ++;
            this.$emit('clicknow', this.count);
        }
    }
    })
    var vm = new Vue({ 
        el : '#app',
        data : {

        },
        methods: {
            clicknow : function(e) {
                console.log(e);
            }
        }
    })
</script>

组件注册

组件名大小写

  定义组件名的方式有两种：

1. 使用 kebab-case：当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如<my-component-name>。
2. 使用 PascalCase：当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说<my-component-name>和<MyComponentName>都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

全局注册

  通过Vue.component创建的组件都是全局注册的，在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

局部注册

  在对vue函数进行初始化时，创建一个对象形式的components属性，然后在它内部进行组件的局部注册。

<!-- 视图部分 -->
<div id="app">
    <test></test>
    <test></test>
</div>
<!-- 脚本部分 -->
<script type="text/javascript">
    var vm = new Vue({ 
        el : '#app',
        components: {
            test: {
                template: "<h2>h2...</h2>",
            }
        }
    })
</script>

单文件组件

  使用Vue.component来定义全局组件在复杂项目中有很多缺点：

• 全局定义，强制要求每个 component 中的命名不得重复
• 字符串模板 ，缺乏语法高亮
• 不支持 CSS，意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤，限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器
    文件扩展名为 .vue 的单文件组件可以解决上述问题，单文件组件例子如下：

<template>
    <!-- 模板、视图区域 -->
</template>

<script>
    //脚本区域
</script>

<style>
    /*样式区域*/
</style>