Vue.js的使用

1、Vue.js是什么？

​ 一位华裔前Google工程师(尤雨溪)开发的前端js库
作用：动态构建用户界面

特点：①遵循MVVM模式
②编码简洁，体积小，运行效率高，移动/PC端开发
③它本身只关注UI，可以轻松引入vue插件和其他第三方库开发项目
与其他框架的关联
①借鉴angular的模板和数据绑定技术
②借鉴react的组件化和虚拟DOM技术
vue包含一系列的扩展插件(库)

vue-cli	vue脚手架
vue-resource(axios)	ajax请求
vue-router	路由
vuex	状态管理
vue-lazyload	图片懒加载
vue-scroller	页面滑动相关
mint-ui	基于vue的组件库(移动端)
element-ui	基于vue的组件库(PC端)

2、Vue.js基本使用

​ 1）引入vue.js

​ 2）创建Vue实例对象(vm)，指定选项(配置)对象
​ el:指定dom标签容器的选择器
​ data:指定初始化状态数据的对象/函数(返回一个对象)

<script type="text/javascript">
	//创建Vue实例
    const vm = new Vue({
    	//配置对象       
        el: '#app',       
        data: {
        	//数据(Model)
            username: ''        
        }
    })
</script>

​ 3）在页面模板中使用{{}}或vue指令

//双向数据绑定 : v-model
//显示数据 : {{xxx}}
<input type="text" v-model="username">
<p>Hello {{username}}</p>

3、Vue对象的选项

①el

​ 指定dom标签容器的选择器，Vue就会管理对应的标签及其子标签(默认为文件名的小写)

②components

映射组件标签

<template>
  <div id="app">
    <!--3、使用组件标签-->
    <HelloWorld/>
  </div>
</template>

<script>
  //1.引入组件
  import HelloWorld from './components/HelloWorld.vue'

  export default {
    //2.映射组件标签
    components: {
      HelloWorld
    }
  }
</script>

③data

​ 对象或函数类型
​ 指定初始化状态属性数据的对象，vm也会自动拥有data中的属性，页面中可以直接访问
​ 数据代理：由vm对象来代理对data中所有属性的操作(读/写)

④methods

​ 包含多个方法的对象
​ 供页面中的事件指令来绑定回调，回调函数默认有event参数，但也可以指令自己的参数
​ 所有的方法由vue对象来调用，访问data中属性直接使用this.xxx

⑤computed

​ 在computed属性对象中定义计算属性的方法

​ 计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算

<div id="demo" id="app">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    <!--fullName1是根据fistName和lastName计算产生-->
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'A',
            lastName: 'B',
        },
        //计算属性，什么时候执行：初始化显示/相关的data属性数据发生改变
        //计算并返回当前属性的值
        computed: {
            //什么时候执行：初始化显示/相关的data属性数据发生变化
            fullName1() {//计算属性中的一个方法，方法的返回值作为属性值
                return this.firstName + ' ' + this.lastName;
            },
            fullName3: {
                //回调函数：1、你定义的 2、你没有调用 3、最终执行了
                //当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
                get() {
                    return this.firstName + ' ' + this.lastName;
                },
                //回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
                set(value) {//value就是fullName3的最新属性值
                    const names = value.split(' ');
                    this.firstName = names[0];
                   this.lastName = names[1];

                }
            }
        }     
    });  
</script>

⑥watch

​ 包含多个属性监视的对象，分为一般监视和深度监视
​ xxx:function(value){ ​ xxx:{ ​ deep:true, ​ handler:fun(value) ​ } ​ }
​ 另一种添加监视方式:vm.$watch('xxx',function(value){})

<div id="demo" id="app">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br> 
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName2: 'A B'
        },
        watch: {//配置监视
            //监听firstName
            firstName: function (value) {
                console.log(this);//vm对象
                this.fullName2 = value + ' ' + this.lastName;
            }
        }
    });
    //监视lastName
    vm.$watch('lastName', function (value) {
        this.fullName2 = this.firstName + ' ' + value;
    })
</script>

4、过渡动画

1. vue动画的理解

操作css的trasition或animation
vue会给目标元素添加/移除特定的class

2. 基本过渡动画的编码
   1). 在目标元素外包裹
   2). 定义class样式
   1. 指定过渡样式: transition
   2. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
   xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter,.xxx-leave-to: 指定隐藏时的样式

代码示例：

<style type="text/css">
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;
        }

        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
</style>

<div id="demo1">
    <button @click="show=!show">
        Toggle1
    </button>
    <transition name="fade">
        <p v-if="show">Hello</p>
    </transition>
</div>

<script type="text/javascript">
    new Vue({
        el: '#demo1',
        data: {
            show: true
        }
    })
</script>

5、生命周期

①vue生命周期分析

• 初始化显示

  ​ beforeCreate()
  ​ created()
  ​ beforeMount()
  ​ mounted()

• 更新状态:this.xxx = value

  ​ beforeUpdate()

  ​ updated()

• 销毁 vue 实例:vm.$destroy()

  ​ beforeDestory()
  ​ destoryed()

​ ②主要的生命周期函数:
​ created()/mounted()：启动异步任务(启动定时器，发送ajax请求，绑定监听)
​ beforeDestory()：做一些收尾工作

6、自定义过滤器

①理解
对需要显示的数据进行格式化后再显示
②编码
1). 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
    // 进行一定的数据处理
    return newValue
})

​ 2). 使用过滤器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

具体示例代码

<div id="test">
    <p>原生：{{date}}</p>
    <p>完整版：{{date | dateString}}</p>
    <p>年月日：{{date | dateString('YYYY-MM-DD')}}</p>
    <p>时分秒：{{date | dateString('HH:mm:ss')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script>
    Vue.filter('dateString', function (value, format) {
    	//如果没有format没有值则使用后面给定的格式
        return moment(value).format(format || "YYYY-MM-DD HH:mm:ss")
    })
    new Vue({
        el: '#test',
        data: {
            date: new Date()
        }
    })
</script>

7、Vue内置指令

指令	属性
v-text/v-html	指定标签体;v-html会将value作为html标签来解析
v-if &v-else v-show	显示/隐藏元素 v-if：如果value为true，当前标签会输出在页面中 v-else：与v-if一起使用，如果value为false，将当前标签输出到页面中 v-show：就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
v-for	遍历 遍历数组：v-for="(persons,index) in persons" 遍历对象：v-for=“value in person”
v-on	绑定事件监听 v-on:事件名，可以缩写为：@事件名 监听具体的按键：@keyup.keyCode @keyup.enter 停止时间的冒泡和阻止时间的默认行为：@click.stop @click.prevent 隐含对象：$event
v-bind	强制绑定解析表达式 html标签属性是不支持表达式的，就可以使用v-bind 可以缩写为： :id='name’ 代码示例：:style="{color:colorValue}"
v-model	双向数据绑定，自动收集用户输入数据
ref：	标识某个标签 ref='xxx’ 读取得到标签对象：this.$refs.xxx
v-cloak	防止页面加载时出现 vuejs 的变量名

示例代码：

<div id="example">
    <p v-text="msg" ref="message"></p>
    <p v-html="msg"></p>
    <p v-for="(item,index) in arr">{{item}}</p>
    <p v-cloak v-for="(item2,index) in obj">{{item2}}</p>
    <button @click="showMsg">显示Msg</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#example',
        data: {
            msg: "Hello VUE",
            arr: [111, 2222],
            obj: {'name1': 1, 'name2': 2}
        },
        methods: {
            showMsg() {
                alert(this.$refs.message.textContent);
            }
        }
    })
</script>

8、自定义指令

1). 注册全局指令

Vue.directive('my-directive', function(el, binding){
	el.innerHTML = binding.value.toUpperCase()
})

2). 注册局部指令

directives : {
   'my-directive' : function(el, binding) {
	el.innerHTML = binding.value.toUpperCase()
 }
}

3). 使用指令:v-xxx

具体示例代码

<div id="test">
    <p v-upper-text="msg"></p>
    <p v-lower-text="msg"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    // 注册一个全局指令(不同的vue的id下均可以使用)
    // el: 指令所在的标签对象
    // binding: 包含指令相关数据的容器对象
    Vue.directive('upper-text', function (el, binding) {
        el.innerHTML = binding.value.toUpperCase();
    })
    new Vue({
        el: '#test',
        data: {
            msg: "Where Amazing Happens!"
        },
        //定义局部指令（只能在指定的id下可以使用）
        directives: {
            'lower-text': {
                bind(el, binding) {
                    el.textContent = binding.value.toLowerCase();
                }
            }
        }

    })
</script>

9、表单的输入绑定

<div id="demo">
    <form action="/xxx" @submit.prevent="submitForm">
        <span>用户名: </span>
        <input type="text" v-model="user.username"><br>

        <span>密码: </span>
        <input type="password" v-model="user.pwd"><br>

        <span>性别: </span>
        <input type="radio" id="female" value="女" v-model="user.sex">
        <label for="female">女</label>
        <input type="radio" id="male" value="男" v-model="user.sex">
        <label for="male">男</label><br>

        <span>爱好: </span>
        <input type="checkbox" id="basket" value="basket" v-model="user.likes">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="user.likes">
        <label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
        <label for="pingpang">乒乓</label><br>

        <span>城市: </span>
        <select v-model="user.cityId">
            <option value="">未选择</option>
            <option :value="p.id" v-for="(p,index) in user.allCity">{{p.name}}</option>
        </select><br>
        <span>介绍: </span>
        <textarea rows="10" v-model="user.desc"></textarea><br><br>

        <input type="submit" value="注册">
    </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            user: {
                username: "",
                pwd: "",
                sex: "女",
                likes: ['foot'],
                cityId: '',
                allCity: [{id: 1, name: 'BJ'}, {id: 2, name: 'SH'}, {id: 3, name: 'SZ'}],
                desc: ''
            }
        },
        methods: {
            submitForm() {
            }
        }
    })
</script>

10、自定义插件的使用

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者属性。如: vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的API，同时提供上面提到的一个或多个功能。如vue-router

代码示例：vue-myPlugin.js

(function (window) {
  const MyPlugin = {}
  MyPlugin.install = function (Vue, options) {
	// 1. 添加全局方法或属性
	Vue.myGlobalMethod = function () {
	  console.log('Vue函数对象的myGlobalMethod()')
	}
	// 2. 添加全局资源
	Vue.directive('my-directive',function (el, binding) {
	  el.textContent = 'my-directive----'+binding.value
	})

	// 3. 添加实例方法
	Vue.prototype.$myMethod = function () {
	  console.log('vm $myMethod()')
	}
  }
  window.MyPlugin = MyPlugin
})(window)

使用

<div id="test">
  <p v-my-directive="msg"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
  // 声明使用插件(安装插件: 调用插件的install())
  Vue.use(MyPlugin) // 内部会调用插件对象的install()

  const vm = new Vue({
	el: '#test',
	data: {
	  msg: 'HaHa'
	}
  })
  Vue.myGlobalMethod()
  vm.$myMethod()
</script>

11、vue脚手架

​ 用来创建vue项目的工具包

​ 创建项目:
​ npm install -g vue-cli(第一次安装vue-cli)
​ vue init webpack 项目名
​ 开发环境运行：
​ cd 项目名->npm install->npm run dev
​ 生产环境打包发布：
​ npm run build(即生成打包好的文件dist)

​ 安装测试服务器测试
​ npm install -g serve
​ serve dist
​ 访问所给的链接即可
​ 使用tomcat服务器
​ 将打包好的dist文件夹放入到webapps下，tomcat默认端口为8080，访问http://localhost:8080/dist即可。

12、eslint

​ 用于做项目编码规范检查的工具
​ 基本原理：定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息
有相应的配置, 可定制检查。
​ 关闭编码时候的检查：webstorm:setting->搜索ESLint-<关闭Enable

13、组件化编程

①vue文件的组成