二. Vue入门

2019-10-03 本文已影响0人任未然

一. 开发工具

VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下：

Vetur —— 语法高亮、智能感知、Emmet等
EsLint—— 语法纠错
Auto Close Tag —— 自动闭合HTML/XML标签
Auto Rename Tag —— 自动完成另一侧标签的同步修改
Path Intellisense —— 自动路劲补全
HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
Vue 2 Snippets ——vue的语法提示

二. 第一个VUE程序

2.1 引入js

注: 也可以去vue官网下载后引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

2.2 给dom元素定义id

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

2.3 vue代码编写

new Vue({
     el: "#app",
     data: {
        msg: "Hello World"
     }
});

三. 基本指令

v-text: v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}, 即插值表达式。
v-html: 将内容以html的形式呈现在页面。
v-model: 双向数据绑定。
v-if: 值如果为true的情况下，显示标签，如果为false会移除标签。
v-else-if: 与v-if配合使用。
v-else: 与v-if配合使用。
v-show: 如果为true,显示信息，如果为false则隐藏标签。
v-for: 循环遍历。语法形式为 v-for=“item in list”
v-bind: 将值绑定到标签的自定义属性上，形式为 v-bind:title="mytitle"，可以简写为 :属性名
v-on:click: 点击事件，可以简写为@click。
v-on:focus: 获取焦点事件，可以简写为@focus。
v-on:blur: 失去焦点，可以简写为@blur。

3.1 v-bind的演示：

<head>
    <style>
        .cls{
            color: red;
        }
        .cls1{
            font-size: 30px;
        }
        .cls2{
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-bind:class="{cls:isCls}">这是一段话</p>
        <p :class="[one, two, {cls:isCls}]">这是一段话</p>
        <p :title="attr">这是一段话</p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            isCls: true,
            content: 'hello world',
            one: 'cls1',
            two: 'cls2',
            attr: '附加属性'
        } 
    });
</script>

效果:

四. 计算属性与监视

4.1 计算属性

计算属性是用来存储数据，而且数据可以进行逻辑操作，是基于其依赖的进行更新，只有在相关依赖发生变化的时候才会更新变化，计算属性是缓存的，只要相关依赖不发生变化，多次访问属性值是之前I计算得到的值，并不会多次执行。计算属性的属性名不需要纳入到Vue的数据对象中。

4.2 监视器

所谓的监视器就是可以通过watch的方式观察某个属性的变化，然后做出相应的处理。

4.3 案例

<div id="app">
    <p>FirstName: <input type="text" v-model="firstName"></p>
    <p>LastName: <input type="text" v-model="lastName"></p>
    <p>FullName1(单向数据绑定): <input v-model="fullName1"></p>
    <p>FullName2(单向数据绑定): <input v-model="fullName2"></p>
    <p>FullName3(双向数据绑定): <input v-model="fullName3"></p>
</div>

对应的js代码如下：

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                firstName: '',
                lastName: '',
                fullName1: '',
            }
        },
        computed: {
            fullName2: function () {
                let firstName = this.firstName;
                let lastName = this.lastName;
                return firstName+ ' '+ lastName;
            },
            fullName3: {
                set(value){
                    let names = value.split(/\s+/);
                    this.firstName = names[0];
                    this.lastName = names[1];
                },
                get(){
                    let firstName = this.firstName;
                    let lastName = this.lastName;
                    return firstName+ ' '+ lastName;
                }
            }
        },
        watch: {
            firstName: function (newVal, oldVal) {
                this.fullName1 = newVal + ' '+ this.lastName;
            },
            lastName: function(newVal,oldVal){
                this.fullName1 = this.firstName + ' ' + newVal;
            }
        }

    })
</script>

五. 事件相关

5.1 事件修饰符

A. 阻止事件冒泡

一个盒子中嵌套另外一个盒子的时候，在内外层的盒子中都有有对应的事件行为，当点击内层盒子时候，默认情况下会触发外层盒子的事件，这种默认的行为就是事件冒泡。需要去阻止事件的冒泡。使用方法：

@click.stop="方法名"

B. 阻止事件的默认行为

对于form表单来说，当点击表单中的button的时候，会默认触发表单的提交；对于a标签，当点击a标签的时候，会触发a标签访问。那么如何去阻止a标签的默认访问行为呢，使用方法是：

@click.prevent="方法名"

5.2 按键修饰符

@keyup.[按钮名]: 单按下指定按钮触发事件

<input @keyup.13="showInfo" v-model="info"><br>
<input @keyup.enter="showInfo" v-model="info"><br>

new Vue({
    el: '#app',
    data: {
        info: ''
    },
    methods: {
        showInfo(){
            alert(this.info);
        }
    }
 })

五. 过滤器

Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式，他不能替代Vue中的methods、computed或者watch，因为过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。不过，在Vue 2.0中已经没有内置的过滤器了，我们必须要自己来构建它们。过滤器只能用于插值表达式中。

5.1 全局过滤器

全局过滤器是只通过 Vue.filter()的方式来定义的过滤器，用这种方式定义的过滤器可以被所有的Vue实例使用。

5.1.1 案例一：将数字转换为美元的形式。

<div id="app">
    <p>{{price | toUSD}}</p>
</div>
<script src="./vue.js"></script>
<script>
    Vue.filter('toUSD', function(value){
        return '$' + value;
    })
    new Vue({
        el: '#app',
        data: {
            price: 345.45
        }
    });
</script>

5.1.2 案例二：串联过滤器，将数字四舍五入成两位有效数字，然后转换为美元表达方式

<div id="app">
    <p>{{price | fix(2) | toUSD}}</p>
</div>
<script src="./vue.js"></script>
<script>
    //方法的第一个参数为数据源，第二个为保留几位小数。
    Vue.filter('fix', (num, limit) => {
        return num.toFixed(limit);
    });
    //转换为美元表达方式
    Vue.filter('toUSD', function(value){
        return '$' + value;
    })
    new Vue({
        el: '#app',
        data: {
            price: 345.45
        }
    });
</script>

5.2 局部过滤器

局部过滤器是定义在Vue实例中，只能在指定的实例中才能使用。

5.2.1 案例：我们创建博客的时候，都会有文章列表，每篇博客将会有一个文章摘要，然后提供一个“阅读更多”的功能。我们这个示例就是来创建一个名为readMore的过滤器，它将把字符串的长度限制为给定的字符数，并将其附加到你的选择的后缀中。

<div id="app">
        <p>{{article | articleDisplay(20, '...')}}</p>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        article: '17日，复旦大学国际政治系副教授沈逸在接受观察者网采访时，将15日启动立法' + 
                  '程序阻挠政府解禁华为的议员称为“杠精”和“戏精”，称其是为了在贸易问题上，' + 
                  '加大国会在白宫面前的存在感，是美国政治的一种内斗形式，但最终，破坏的还是' + 
                  '美国企业的利益。'
        },
        filters: {
            // value为数据源，length表示要展示的长度，suffix为后缀
            articleDisplay(value, length, suffix) {
            return value.substring(0, length) + suffix;
        }
    }
})
</script>

六. vue-cli构建项目与打包部署

使用vue-cli能够快速的帮助我们构建项目，它就如同一个脚手架，提供了可选的模板。在使用vue-cli之前需要先安装nodejs。

6.1 使用npm构建项目

sudo npm install -g @vue/cli             #安装vue-cli,该步骤需要等一段时间
vue -V                              #查看vue-cli的版本
npm run serve                # 运行工程
vue create my-app                   #创建名为my-app的项目

6.2 项目的结构介绍

public: 存放静态文件。
src: 源码文件，开发就在此目录下。
.gitignore: git的配置文件。
babel.config.js: babel的配置文件，在创建项目的时候才用的脚手架为bable。
package-lock.json：定义了依赖库的下载位置，保证了在项目迁移部署环境的一致性。
package.json: 定义了该项目依赖的类库。

6.3 项目的打包部署

执行命令：

npm run build

将生成的dist目录下的文件放入到tomcat或者nginx下，启动服务器，即可访问。

七. 组件化开发

组件化开发是在ES6中提出的，可以提高页面的复用率，提高开发效率，便于团队协作，是一套模板化的代码，要有<template>、<script>、<style>三个标签，分别用来定义布局、脚本和样式。而且<template>下必须有一个根节点。

7.1 编写App.vue和HelloWorld.vue

HelloWorld.vue

<template> 
    <div>  <!-- template的根节点，是必须的 -->
        <h1 class="title">{{msg}}</h1>
    </div>
</template>
<script>
    export default {   <!-- 向外保留成员，表示向外暴露该组件 -->
        data() {
            return {
                msg: 'Hello World'
            }
        } 
    }
</script>
<style>
    .title{
        color: red;
    }
</style>

App.vue

<template>
    <div>
        <p>{{article}}</p>
        <Helloworld></Helloworld> <!-- 在Helloworld.vue中的组件 -->
    </div>
</template>
<script>
/**
 * 引入HelloWorld.vue组件，使用Helloworld变量来接收，接收变量的组件
 * 可以叫任何名字，但是推荐使用和导入组件保持一致。
 */
import Helloworld from './components/HelloWorld.vue'

export default {
    /**
     *  需要在当前组件中来定义引入的组件，接收的形式可以有二种：
     * 
     *  components: {HelloWorld} 最原始的写法为{Helloworld:Helloworld},第一个Helloworld
     *     在当前组件中使用的名字，可以随意更改，第二个Helloworld是上面import引入的时候用来接收的变
     *     量名。如果只写一个表示当前组件中使用的名字和变量名一致。 
     */
    components: {Helloworld},
    data(){   //组件化编程必须使用定义data方法
        return {
            article: '路透社20日援引伊朗法尔斯通讯社消息称'
        };
    }
}
</script>
<style>
</style>

7.2 定义入口JS文件

import Vue from 'vue'        //引入vue
import App from './App.vue'  //引入自己定义的App.vue,使用变量App来接收

new Vue({
    render: h => h(App),  //将App组件渲染到index.html中。
}).$mount("#app")

render是Vue中的一个方法，方法的定义形式如下：

// render最原始的，而传入的参数createElement又是一个函数，用来生成dom结构
render: function(createElement){
    
}
// 按照ES6的箭头函数的写法，进行第一次演变
render: createElement => createElement(模板)
// 将上面的createElement变为h，那么就得到最终的形式
render: h => h(App)

$mount("#id")该方法的作用是先实例化Vue对象，接着在挂载到指定Id的节点上，和在new Vue的时候使用el指定要渲染的节点的形式是一样的，只是换了种形式而已。