vue基础

1.vue的基本用法

（1）vue.js之HelloWorld基本步骤

<div id = "app">

<div> {{ msg }} </div> /*提供标签，用于填充数据*/

</div>

<script type="text/javascript" src="js/vue.js"></script> /*引入vue.js文件*/

<script type="text/javascript">

new vue ({ /*使用vue语法完成功能*/

el:"#app",

data:{

msg:"helloworld" /*把vue提供的数据填充到标签里*/

}

})

</script>

(2)细节分析

• 实例参数分析

el：元素的挂载位置（值可以是css选择器/dom元素）

data：模型数据（值是一个对象）

• 插值表达式用法

将数据填充到html标签中 {{ msg }}

支持基本计算操作

• 代码运行原理

 编译过程（vue语法——原生语法）

2.vue模板语法

（1）概述

• 前端渲染，把数据填充到html标签中
• 前端渲染方式：原生js拼接字符串

                                  使用前端模板引擎

                                  使用vue特有的模板语法

• 语法：插值表达式

                     指令

                     事件绑定

                    属性绑定

                    样式绑定

                   分支循环结构

（2）指令

• 本质是自定义属性，以v-开始（如v-cloak）
• v-cloak指令：解决插值表达式中的“闪动”问题；原理：先隐藏，替换好值后再显示最终的值
• 数据绑定指令：v-text,填充纯文本，相比插值表达式更简洁

                                   v-html，填充html片段，存在安全性问题，本网站内部数据可用，来自第三方数据不可用

                                   v-pre，填充原始信息。显示原始信息，跳过编译过程

• 数据响应式

                              数据的变化导致页面内容的变化

                              v-once：只编译一次，显示内容后不再具有响应式功能

（3）双向数据绑定

原理：采用“数据劫持”和“发布者-订阅者”模式的方式，通过“object.defineProperty()”方法来劫持各个属性的setter.getter，在数据变动时发布消息给订阅者，触发相应的监听回调

• v-model指令：<input type="text" v-model="uname"/>
• MVVM设计思想：提供对view和viewModel的双向数据绑定，这使ViewModel的状态改变可以自动传递给view，即所谓的数据双向绑定

                                      M（model）——数据

                                      V（view）——document元素

                                      VM（view-model）——控制逻辑

（4）事件绑定

• vue如何处理事件：v-on指令 <input type="button" v-on:click="num++"/>

                                        v-on简写 <input type="button" @click="num++"/>

• 事件函数的调用方式：直接绑定函数名称 <button v-on:click="say"> hello </button>

                                             调用函数：<button v-on:click="say()"> say hi </button>

• 事件函数参数传递：普通函数和事件对象  <button v-on:click="say("hi", $event)"> say hi </button>
• 事件修饰符：.stop阻止冒泡 <a v-on:click.stop="handle"> 跳转 </a>

                                 .prevent阻止默认行为 <a v-on:click.prevent="handle"> 跳转 </a>

• 按键修饰符：.enter回车键 <input v-on:keyup.enter="submit">

                                 .delete删除键 <input v-on;keyuo.delete="handle">

• 自定义按键修饰符：全局config.keycode对象 vue.config.keycodes.f1 = 112

（５）属性绑定

• v-bind指令 <a  v-bind:herf='url'>跳转</a>

           缩写 <a :herf='url'>跳转</a>

• v-model底层实现原理  <input v-bind:value="msg" v-on:input="msg=$event.target.value">

（６）样式绑定

• class样式处理

            对象语法<div v-bind:class="{active:isActive}"></div>

           数组语法<div v-bind:class="[activeClass,errorClass]"></div>

• style样式处理

          对象语法<div v-bind:style="{color:activeColor, fontSize:fontSize}"></div>

         数组语法<div v-bind:class="[baseStyles, overridingStyles]"></div>

（3）分支循环结构

• 分支结构

        v-if

       v-else

       v-else-if

      v-show

• v-if与v-show的区别

          v-if控制元素是否渲染到页面

         v-show控制元素是否显示（已经渲染到了页面）

• 循环结构

          v-for遍历数组

           <li v-for='item in list'>{{ item }}</li>

          <li v-for='(item, index) in list'>{{ item }}+'...'+{{ index }}</li>

       key的作用：帮助vue区分不同的元素，从而提高性能

         <li :key='item.id' v-for='(item, index) in list'>{{ item }}+'...'+{{ index }}</li>

         v-for遍历对象

           <div v-for='(value, key, index) in object'></div>

         v-if和v-for结合使用

            <div v-if='value==12' v-for='(value, key, index) in object'></div>

４.vue常用特性

（1）表单操作

• 基于vue的表单操作

           input 单行文本

           textarea 多行文本

          select 下拉多选

           radio 单选框

          chekbox 多选框

• 表单域修饰符

           number 转化为数值

           trim 去掉开始和结尾的空格

           lazy 将input事件转化为change事件（失去焦点时触发）

（2）自定义指令

• 全局指令

       vue.direction ('focus' {

             inserted: function (el) {

                 el.focus();       //获取元素焦点

             }

       })

      用法：<input type="text" v-focus>

• 带参数的自定义指令（改变元素背景色）

         vue.direction ('color', {

          inserted: function(el, binding) {

                el.style.backgroundColor=binging.value.color;

         }

      })

      用法：<input type="text" v-color='{color: "orange"}'>

      局部指令：

            direction:{

               focus: {

                    inserted: function(el) {

                            el.focus();

                   }

               }

          }

(3）计算属性

computed: {

          reversedMessage: function() {

               return this.msg.split(' ').reverse().join(' ')

          }

 }

计算属性与方法的区别

    计算属性是基于它们的依赖进行缓存的

     方法不存在缓存

(4)侦听器

watch: {

     firstName: function(val) {

           this.fullName = val + this.lastName;

      },

     lastName: function(val) {

            this.fullName = this.firstName + val;

      }

}

应用场景：数据变化时执行异步或者开销大的操作

（5）过滤器

• 自定义过滤器

vue.filter ('过滤器名称'， function(value) {

              //过滤器业务逻辑

})

• 过滤器的使用

<div>{{ msg | upper}}</div>

<div>{{ msg | upper | lower}}</div>(可以同时使用多个)

<div v-bind:id="id | formatId"></div>

• 局部过滤器

filters: {

      capitalize: function() { }

}

• 带参数的过滤器

vue.filter('format', function(value, arg...) {

            //value是过滤器传过来的参数

})

使用：<div>{{data | format ('yyyy-mm-dd')}}</div >