vue 入门

前端工作就是与界面打交道。
vue是mvvm前端视图层框架，提供了数据的双向绑定。以数据驱动视图的改变，视图通过input绑定onchange事件来改变数据。
vue双向数据绑定的原理请查看链接：https://www.cnblogs.com/libin-1/p/6893712.html

一.常见的vue指令

1.插值表达式 v-cloak v-text v-html

我直接导入的是vue的包，可在vue官网上复制。
案例中我只写了主要部分

<style>
    [v-cloak]{
        display: none;
    }
 </style>
 
// 1.导入包
    <script src="lib/vue.js"></script>

// 2.dom元素
//   <!-- mvvm的 v 层，渲染页面 -->
    <div id="app">
         <p v-cloak>--{{msg}}</p>        // <!--解决插入值闪烁问题-->
        <p v-text="msg">++++{{msg}}</p>    // <!--没有闪烁问题，但是会覆盖内容-->
        <p v-html="msg2">123</p> // <!--里面可嵌套html内容-->
    </div>
//   <!-- 3.数据处理 new一个vue对象-->
    <script>
        let vm = new Vue({ // mvvm 的 vm 层 做中间处理
            el:"#app", // elment 绑定的dom元素
            data:{// mvvm 的 m 层  用来处理数据
                 msg:"hollow word",
                msg2:"<h2>1234542</h2>"
            }
        })
    
    </script>

• v-cloak 是常用的，里面可以随意添加内容
• v-text 若是在里面添加别的数据会被覆盖掉
• v-html 可渲染html结构的数据，同样也会覆盖原有的内容

2. 属性绑定指令 v-bind 可简写成“ ： ”

<div id="app">
		// 第一种写法 v-bind:属性
      <input type="button" value="按钮" v-bind:title="title">
       // 第二种写法  ：属性
      <input type="button" value="按钮" :title="title">
</div>

<script>
        let vm = new Vue({
            el:"#app", // elment 绑定的dom元素
            data:{
                title:"请点击此处按钮"
            }
        })
 </script>

3.事件绑定指令 v-on 可简写 @事件

// 事件后面直接写js表达式会报错，会把console当成一个属性，而非js表达式
// Property or method "console" is not defined 报错
// <input type="button" value="按钮" v-on:click="console.log('123')">
// 正确的写法 
<input type="button" value="按钮" :title="title"  @click="show">

<script>
        let vm = new Vue({ // mvvm 的 vm 层 做中间处理
            el:"#app", // elment 绑定的dom元素
            data:{ // 页面渲染的数据
                title:"请点击此处按钮"
            },
            methods:{// 所有方法写在这个里面
                show:function(){
                    console.log("你点击了我的心")
                }
            }
        })
    
    </script>

• v-on：事件 = “方法 / 属性” 等号后面不能直接写js表达式，会报错，里面没有这个属性

4.事件修饰符

• .stop 阻止冒泡
• .self 只有当点击自己时，才会触发事件。 只阻止自己身上的事件冒泡
• .prevent 阻止默认事件
• .capture 事件捕获模式触发事件
• .once 事件只触发一次

<div id="app">
        <div @click.capture="out">
            outer
            <div @click.stop="show">
                center
                <div @click.once="inner">
                    inner
                </div> // inner
            </div>// center
        </div>// out
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                show() {
                    console.log("center")
                },
                out() {
                    console.log("outer")
                },
                inner() {
                    console.log("inner")
                }
            }
        })
    </script>

5.双向数据绑定 v-model

它运用在表单元素中，实现 v 视图 改变 m数据 跟着改变
v-bind 实现的是 data 改变 v 视图改变

<input type="text" v-model="msg" :title="title">
<div>{{msg}}</div>

let vm = new Vue({
            el: "#app",
            data: {
                msg:"今天是个好天气呀，好天气呀",
                title:"我是一个标题"
            }
        })

6.v-if v-show

v-if 当切换让它显示时，它才在内存中显示，切换频繁的话，消耗性能
v-show 只是给元素添加了一个样式 display:none; 频繁切换，消耗性能小

二.vue中样式的写法

通过v-bind绑定属性，操作样式。分为2种，一种直接绑定class，可嵌套外联样式； 一种直接绑定style ，写行内样式。

全文都是采用简写指令。v-bind 简写为 ‘ ：’

<div id="app">
        <!-- v-bind 绑定属性写样式 class类名 -->
        <div :class="['cont']">第一种，以数组的模式传递样式</div>
        <div :class="['cont',flag?'active':'']">第二种，在数组中写三元表达式</div>
        <div :class="['cont',{'active':flag}]">第三种，在数组中以对象方式传递样式</div>
        <div :class="{'cont':flag,'active':!flag}">第四种，直接以对象模式传递样式</div>

        <!-- v-bind 绑定style直接写行内样式 -->
        <div :style="obj1">内联样式写法</div>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                flag: true,
                obj1: { 'color': 'red', 'font-size': '22px' }
            }
        })
    </script>

三.在vue中使用v-for 遍历数组

  <div id="app">
       <!-- 括号里的第一项是数组里的每一项，第二项是key值，每一项的索引 -->
        <ul v-for='(item,key) in list'>
            <li>{{key+1}}---{{item.name}}</li>
        </ul>
        <!-- 只遍历数字 -->
        <ul v-for='cont in 10'>
            <li>{{cont}}</li>
        </ul>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: [
                    { 'id': 1, 'name': 'wangfeng' },
                    { 'id': 2, 'name': 'zhaowan' }
                ]
            }
        })
    </script>

四.vue中的事件处理

事件监听 v-on

v-on:事件 = 事件处理函数

• 全局自定义事件
  自动获取焦点事件 v-focus

<input type='text'  v-focus>  // 调用自定义事件

Vue.directive('focus',{  // 使用时直接在dom元素中插入   v-focus
       inserted:function(e){
           e.focus();
       }
 })

• 局部自定义事件
  在定义自定义 事件名称时，不需要加 v- 只在使用时加 v-

<input type="text"  v-focus v-color="'red'">

let vm = new Vue({
     el: "#app",
     data: {
     },
     directives: { // 自定义事件
     // el，当前被绑定的dom元素   binding是传入的参数
        'color': function (el, binding) {
               el.style.color = binding.value;
         }，
         'focus':funcion(el){
				el.focus();
		}
     }
})

按键修饰符

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

• enter
• tab
• delete (捕获“删除”和“退格”键)
• esc
• space
• up
• down
• left
• right

<!-- 只有当按键是 enter / 13 时，才会触发 -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

-自定义按键修饰符
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 @keyup.f2=‘submit’
Vue.config.keyCodes.f2= 113

五.vue 中的过滤器filter

1. 全局过滤器 Vue.filter

全局过滤器，其它实例皆可调用

<div id="app">
		<!-- 过滤器，前一项是后一项的实参。 dataform(可以传参) -->
      <div>{{msg | dataform}}</div>
</div>
<div id="app2">
		<!-- 过滤器，前一项是后一项的实参。 dataform(可以传参) -->
      <div>{{msg | dataform}}</div>
</div>
  
<script>	
	let vm = new Vue({
		el:"#app",
		data:{
			msg:"这是请求来的数据"
		}
	});
	let vm2 = new Vue({
		el:"#app2",
		data:{
			msg:"这是请求来的数据"
		}
	});
	Vue.filter('dataform', function (data) { // data传过来的数据，msg
           console.log(data+2); // 结果：这是请求来的数据2
   })
</script>

2.私有过滤器

实例身上自己的过滤器，其它的实例不能调用
当有全局过滤器，也有私有过滤器时，实例先找自己身上的过滤器，没有，再找全局过滤器

<div id="app">
		<!-- 过滤器，前一项是后一项的实参。 dataform(可以传参) -->
      <div>{{msg | dataform}}</div>
</div>

<script>	
	let vm = new Vue({
		el:"#app",
		data:{
			msg:"这是请求来的数据"
		},
		filters:{// 私有过滤器
			dataform:fuction(data){
			console.log(data+1);// 结果：这是请求来的数据1
		}
	});
	// 全局过滤器
	Vue.filter('dataform', function (data) { // data传过来的数据，msg
           console.log(data+2); // 结果：这是请求来的数据2
   })
</script>

六. vue中动画运用

单个动画用transtion包裹要做动画的元素
动画类名默认情况下是v-开头
若想自定义动画则只需要在transition标签上添加name属性即可

<style>
        .v-enter-active,.v-leave-active{
            transition: opacity 1s;
        }
        .v-enter,.v-leave-to{ // 入场动画，出场动画
            opacity: 0;
        }

        .fade-enter-active,.fade-leave-active{// 自定义类名动画
            transition: opacity 1s;
        }
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }   
  </style>
    
<div id="app">
        <div>
            <input type="button" value="toggle" @click="flag=!flag">
            <transition>
                <h3 v-if="flag">这是单个动画</h3>
            </transition>
            <hr />
        </div>
        <!-- 自定义动画类名 -->
        <div>
            <input type="button" value="toggle2" @click="flag2=!flag2">
            <transition name="fade">
                <h3 v-if="flag2">这是单个动画</h3>
            </transition>
        </div>
    </div>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                flag: false,
                flag2: false
            }
        })

    </script>

多个动画用transition-group包裹，用法同上
tag属性默认值是span，给tag添加什么标签，dom就以这个标签渲染
appear是页面一打开，就有的动画特效
其它属性请参考vue中文文档：https://vuejs.bootcss.com/v2/guide/transitions.html

<div>
     <transition-group appear tag="ul">
         <li v-for="(item,i) in list" v-bind:key="item.id">
                {{item.id}}---{{item.name}}
         </li>
     </transition-group>
</div>

<script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: [
                    { id: 1, name: "wangfai", age: 18 },
                    { id: 2, name: "wangdeng", age: 28 },
                    { id: 3, name: "wangjin", age: 48 }
                ]
            }
        })

  </script>