Vue【入门篇】——基本内容及使用

Vue介绍

一、特点

1. 遵循MVVM(Model-view-viewModel)模式
2. 体积小，运行效率高

二、扩展插件

1. vue-cli : vue脚手架
2. vue-resource(axios) : ajax请求
3. vue-router : 路由
4. vuex : 状态管理
5. vue-lazyload : 懒加载
6. vue-scroller : 页面滑动相关

三、MVVM

• M -> model : 模型，数据对象(data)
• V -> view : 视图，模板页面(html)
• VM -> viewModel : 视图模型(vue实例)

Vue使用

一、创建Vue实例

<div id="demo">
    {{ msg }}
    <!-- 注意二者的区别   -->
    {{ test1() }}   <!-- 方法带括号 -->
    {{ test2 }}   <!-- 计算属性不带括号 -->
</div>

<script>
    new Vue({
        el:'#demo',   //element元素
        data:{msg:'hello vue'},  //数据
        method:{   //方法
            test1(){
                alert("test1")
            }   
        },
        computed:{  //计算属性
            test2:function() {
                alert("test2")
            }
        }
        // watch:{}  //侦听属性          
    })
</script>

1、 计算属性和方法可以得到相同的结果，不同的是，计算属性是基于响应式依赖进行缓存,只有当相关的响应式依赖发生改变时才会重新求值，即避免了多次获取data数据。

2、 数据变动的响应都可以使用计算属性和侦听属性，其中计算属性更加方便，但是如果当数据的变动涉及异步操作或开销较大的操作时使用侦听属性更为合适。

3、 侦听属性可以通过 this.$watch('modelName',function(){}) 进行定义。

4、 model包括 getter 和 setter 属性，可以设置get和set回调函数。

二、样式的动态变化

1、 class绑定 < :class="'className'" >
2、 style绑定 < :style="{key:value}" >

<style>
  .aClass{color:red;}
  .bClass{color:blue;font-size:30px}
  .cClass{font-size:50px}
</style>

<div id="demo">
    <!--  三种不同的class绑定方式  -->
    <p :class="a">one</p>
    <p :class="{aClass:aFlag, bClass:bFlag}">two</p>
    <p :class="['aClass','cClass']">three</p>
    <!--  style绑定方式  -->
    <p :style="{fontSize:size+'px'}">four</p>
</div>

<script>
    new Vue({
        el:'#demo',   //element元素
        data:{  //数据
            msg:'hello vue',
            a:'aClass',
            aFlag:false,
            bFlag:true,
            size:40
        }  
    })
</script>

三、条件渲染

<div id="demo">
  <p v-if="flag">真</p>
  <p v-else>假</p>
  <p v-show="flag">展示成功</p>
  <p v-show="!flag">展示失败</p>
</div>

<script type="text/javascript">
    const vuetest = new Vue({
        el: '#demo',   //element元素
        data: {  //数据
            flag:true
        }
    })
</script>  

1、 v-if 和 v-else 在页面中只能保留一个，另一个标签将会被清除。
2、 如果 v-show 条件不为真，虽然他的标签内容没有展示，但它仍存在页面中，只是用了 display:none 进行隐藏。

所以通过以上两点可以看出，如果需要频繁切换标签，使用 v-show 更为合适，避免多次加载和清除标签。

四、事件处理

<style>
    .out{
        width: 200px;
        height: 200px;
        background-color: blue;
    }   
    .inner{
        width: 100px;
        height: 100px;
        background-color: red;
    }   
</style>
<div id="demo">
  <!--  1、绑定监听事件的三种方式  -->
    <button @click="test1('hello vue')">test1</button>
    <button @click="test2($event)">test2</button>
    <button @click="test3(num,$event)">test3</button>
  <!--  2、事件修饰符  -->
    <!-- 阻止单击事件继续传播 -->
    <div class="out" @click="test4">
        <div class="inner" @click.stop="test5"></div>
    </div>
    <!-- 点击事件不会跳转页面 -->
    <a href="http://www.baidu.com" @click.prevent="test6">test6</a>
  <!--  3、按键修饰符   -->
    <!-- 只有当按键为"enter"时触发事件submit -->
    <input type="text" @keyup.enter="test7">
</div>

<script type="text/javascript">
    const vuetest = new Vue({
        el: '#demo',   //element元素,
        data:{
            num:12  
        },
        methods:{
            test1:function (message) {alert(message)},
            test2:function (event) {alert(event.target.innerText)},
            test3:function (num,event) {alert(num+event.target.innerText)},
            test4:function () {alert("out")},
            test5:function () {alert("inner")},
            test6:function () {alert("test6")},
            test7:function (event) {alert(event.target.value)}
        }
    })
</script>

1、 在绑定监听事件过程中，可以省略绑定参数 $event，并在函数定义中直接使用 event，event 表示的是原生DOM事件。
2、 事件修饰符包括以下几种:

• .stop (停止)
• .prevent (阻止)
• .capture (捕获)
• .self (内部元素)
• .once (触发一次)
• .passive (立即执行)

3、 按键修饰符包括以下几种:

• .enter (回车键)
• .tab (制表键)
• .delete (退格键或删除键)
• .space (空格键)
• .up/.down/.left/.right (上下左右)

4、 系统修饰符包括以下几种:

• .ctrl (ctrl键)
• .alt (alt键)
• .shift (shift键)
• .meta (command键)

5、 使用修饰符时需要考虑顺序，不同的顺序会产生不一样的效果，如下所示：

• @click.prevent.self : 阻止所有点击
• @click.self.prevent : 阻止对元素本身的点击

五、自定义过滤器

<div id="demo">
  <!-- 将驼峰命名的字符串转为下划线命名 -->
  <input type="text" placeholder="edit me" v-model="inputString">
  <p>{{ inputString | stringFilter }}</p>
</div>

<script type="text/javascript">
    /**  全局定义过滤器 */
    Vue.filter('stringFilter',function (value) {
        return value.replace(/([A-Z])/g,'_$1').toLowerCase()
    })
    new Vue({
        el: '#demo',
        data:{ inputString:'helloVueDemo'},
        
       /**  组件中定义过滤器 
        filters:{
            stringFilter:function(value){
                return value.replace(/([A-Z])/g,'_$1').toLowerCase()
            }
        }
       */
    })
</script>

1、 自定义过滤器可以用在双花括号插值或 v-bind 表达式中，即以下两种：

• {{ [defaultValue] | [filterName] }}
• < v-bind:value="defaultValue | filterName" >

2、 可以在Vue组件中定义过滤器，也可以在创建Vue实例前全局定义过滤器

六、自定义指令

<div id="demo">
  <!-- 定义三种不同的自定义指令  -->
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
  <!-- 添加动态指令参数 -->
  <p v-other-text:[val]="msg"></p> 
</div>

<script type="text/javascript">
    <!-- 注册全局指令 upper-text -->
    Vue.directive('upper-text',{
          bind:function(el,binding) {
            el.textContent = binding.value.toUpperCase()
          }
    })
    new Vue({
        el: '#demo',
        data:{
            msg:'Hello Vue',
            val:50
        },
        // 注册局部指令 lower-text 和 other-text
        directives:{
            /** 以下是两种不同的定义方式 */
            'lower-text'(el,binding){
                el.textContent = binding.value.toLowerCase()
            },
            otherText: {
                bind: function (el, binding) {
                    el.textContent = "Other text"
                    el.style.fontSize = binding.arg + 'px'
                }
            }
        }
    })
</script>

1、 注册指令时可以指定不同的钩子，有以下几种:

• bind : 只在绑定元素时调用一次
• inserted : 被绑定元素插入父节点时调用
• update : 所在组件发生更新时调用

2、 指令函数可以传入以下参数：

• el : 指令所绑定的元素，用来直接操作 DOM
• binding : 指令对象，它包括以下property:

    - name : 指令名
    - value : 指令绑定的值，该值可以是对象或数组
    - expression : 字符串形式的指令表达式
    - arg : 传给指令的参数
  

• vnode : Vue编译生成的虚拟节点
• oldVnode : 旧的虚拟节点

3、 使用动态指令参数需要在html标签中添加指令对应的命名空间 xmlns:[指令名]="http://www.w3.org/1999/xhtml