View on GitHub

learning

学习笔记

vue

创建vue实例

面向数据编程, 不是面向DOM编程

<!-- 挂载点 -->
<div id="vue"> 
    <!-- 模板, 可放template属性中 -->
    <p></p>
    <p></p>
</div>
// 实例化vue对象
var vue = new Vue({
    el: "#vue",
    data: {
        name: "Lee"
    },
    methods: {
        test: function(time) {
            return 'Good ' + time + this.name;
        }
    },
    template: "<p>hello</p>"//自动将模板放到挂载点中, 会覆盖掉原有的元素;
})

可通过vue.name来控制name

: 只有当实例创建时的data里的属性才是响应式的

属性

el: element 需要获取的元素, 根元素, 在该容器中操作

data: (对象)用于存储数据

methods: (对象)用于存储方法, 可在HTML中调用

: 各属性可通过实例名.$属性名访问, 如 vue.$el

声明周期

img

模板语法

vue将模板编译成虚拟DOM渲染函数。结合响应函数, 智能的计算出最少需要重新渲染多少组件

文本绑定

插值表达式: ``

可以通过v-once进行一次插值, 之后不会改变

属性绑定

<!-- url: "https://www.google.com" -->
<a v-bind:href="url">

使用``无效, 在属性前使用v-bind:指令修饰

v-bind:可缩写为:

HTML绑定

<!-- tag: "<a href="https://www.google.com">谷歌</a>" -->
<p v-html:tag></p>

使用v-html:指令 给一个标签里加上HTML代码(转义)

使用v-text:指令 加上没转义的代码

注意: 尽量不要动态渲染HTML

使用JavaScript表达式

对于所有数据绑定, 都能使用表达式(单个表达式)

注意: 模板指令后面的内容就不再是一个字符串了, 而是一个JS表达式

计算属性与监听器

计算属性

一个属性由其他属性计算而来, 会有缓存值, 当所依赖的属性改变后再改变

computed: {
    fullName: function() {
        return this.firstName + " " + this.lastName
    }
},

computed计算属性: 在耗时和大量搜索时不使用methods, 使用computed

计算属性只有在它的依赖发生改变时才会重新求值(data内发生改变)

监听器

watch属性: 监听某个数据的变化, 当数据变化时, 则执行代码

watch: {
    fullName: function() {
        count++;
    }
}

Class与Style绑定

给class绑定一个对象: {对象名, true/false} (对象语法)

法一: 使用v-bind:绑定一个class, class里传入一个对象, 传入对象为 class名: true/false。通过控制true/false来确定class值

<div v-bind:class="{changeColor:changeColor}"></div>
new Vue({
    el: "#vue",
    data: {
        changeColor: true
    },
    methods: {
    }
})

注意: 使用v-bind一定用对象

法二: 在computed中创建方法来返回对象给class

<div v-bind:class="compClasses"></div>
new Vue({
    el: "#vue",
    data: {
        changeColor: true
    },
    methods: {
        compClasses:function(){
            return {
                changeColor: this.changeColor
                //如果需要返回多个class, 可以返回多个属性
            }
        }
    }
})

条件渲染、列表渲染

条件渲染

v-if:指令, 从DOM中移除
v-else-if:指令

v-show:指令: display: none状态, 保留在DOM中

注意: 当使用v-if,如果元素标签相同, 可能不会修改值。 这种情况下在标签内加上key属性并给值

列表渲染

v-for:指令

<!-- 拿到每一项 -->
<ul>
    <li v-for="character in characters" :key="character">
        
    </li>
</ul>

<!-- 拿到每一项和下标 -->
<ul>
    <li v-for="(user,index) in users" :key="index">
        . 
    </li>
</ul>

<!-- 拿到单个对象的val和key -->
<template v-for="(val, key, index) in users" :key="key">
    <p> :  - </p>
</template>

注意: 尽量用:key为每项提供不同的属性

template标签

<template>当做一个不可见的包裹元素

事件

绑定事件 v-on:/@

<p>age: </p>
<button v-on:click = "add">加</button>
new Vue({
    el: "#vue",
    data: {
        age: 20;
    },
    methods: {
        add: function() {
            this.age++;
        }
    }
})

使用v-on:指令来绑定事件, v-on:可缩写为@

PS: 使用包裹的方法应该加上(), 其它不需要传参的情况下可以省略()

事件对象 event

事件修饰符

阻止冒泡

stop修饰符: 阻止冒泡 类似于原生JS的e.stopPropagation();/window.event.cancelBubble = true;

<button v-on:click.stop = "add">加</button>

取消默认行为

prevent修饰符: 取消默认行为 类似于原生JS的e.preventDefault();/window.event.returnValue = false;

键盘修饰符

<input v-on:keyup.enter="submit">

双向数据绑定

不仅能影响HTML, 让HTML影响数据

ref

<input ref="name" type="text" v-on:keyup="add">
<p></p>
add:function(){
    this.name = this.$refs.name.value;
}

v-model: 指令

<label>名: <input v-model="lastName"></label>

组件

//定义一个全局组件
Vue.component("greeting", {
    templete: `
    <div>
        <p>: Hello!</p>
        <button v-on:click='changeName'>改名</button>
    </div>
    `,
    //必须使用函数返回: 目的是每次都返回 新的对象 
    data: function() {
        return {
            name: "Lee"
        }
    },
    methods:{
        changeName: function(){
            this.name = "Herry"
        }
    }
})

//定义一个局部组件
var TodoItem = {
    template: "<li>item</li>"
}
new Vue({
    el: "#root",
    //在此注册
    components: {
        'todo-item': TodoItem
    }
})

传参

在元素中使用属性传参, 在组件中使用props属性接收

<!-- v-bind:content 传递content属性 -->
<todo-item :content="item"></todo-item>
Vue.component("todo-item", {
    //接收到值
    props: ['content'],
    template: '<li><h2 id="vuejs练习">vue.js练习</h2>

<p>目前已存放:</p>

<ol>
  <li><a href="test1">拳击</a></li>
</ol>
</li>'
}

组件和实例的关系

  1. 一个vue项目由一个个实例构成
  2. 一个组件也就是一个vue实例(组件里也有data/methods/……)
  3. 实例不定义template, 则会在其挂载点寻找

v-cli

借助webpack打包工具, vue提供了v-cli脚手架来快速搭建一个项目

安装

npm install --global vue-cli
# 新建项目
vue init webpack name
# 转到项目目录
cd name
# 启动项目
npm run dev
# 此时8080端口可以看到

各文件夹

src/main.js