VUE自学记录

---

前言

此文章主要用来记录VUE学习路线以及学习过程中的思考。以便回顾复习。

一、常用模板语法

1.第一个vue程序

类似于Jquery，将其引入html文档中，将某个标签作为vue标签使用时，则可以new一个新的vue对象，利用el指明id名，利用data表明想让此标签显示什么内容：然后使用简洁的模板语法将数据渲染到页面上。

2.el挂载点

el支持各类除html和body的标签，
el挂载点可以是任意选择器
vue实例的作用范围：el命中的元素+内部的后代元素

3.data属性

Vue中用到的数据定义在data
data中可以写复杂类型的数据

4.内容绑定、实例绑定

1.v-text： 设置 标签的内容，默认写法会替换全部内容，使用{{}}替换指定内容。

 <div class="app">
        <h2 v-text='messages'></h2>
        {{message}}
    </div>

        var vue=new Vue(
            {
                el:'.app',
                data:{
                    message:'hellos',
                    messages:'hell'

                }
            }

        )

2.v-html设置元素的innerHTML，可以解析html结构。

3.v-on用于为元素绑定事件v-on：click即绑定双击事件。 也可以利用@click绑定click事件。绑定的方法定义在methods属性当中。

此外可以在绑定事件的时候传递自定义参数，或者事件修饰符。
传递参数的方法很简单就是直接为它绑定某事件的时候带上参数，然后再methods当中定义函数的时候也是带参数的形式。而事件修饰符比如 @keyup.enter 即采用点语法表明要采用的事件。

4.综合应用计数器：

    <div class="app">
        <button v-on:click='add' >+</button>
        <a v-text='message'></a>
        <button v-on:click='sub'>-</button>
    </div>

        var vue=new Vue(
            {
                el:'.app',
                data:{
                    message:1

                },
                methods:{
                    add:function()
                    {
                        this.message+=1
                    },
                    sub:function()
                    {
                        this.message-=1
                    }
                }
            }

        )

总结：在VUE中，datastate，methods更改state的函数集合（所以this指定具体data），el为挂载点（保存自身+子代所有数据）

5.显示切换、属性绑定

1.v-show：指令表示的值最终会被解析为bool类型，可以控制标签是否存在。

     <h1 v-show='false'>555</h1>

本质为切换元素的display值。

2.v-if:与v-show类似，根据表达式的真假，切换元素的显示隐藏。唯一不同的就是它是直接控制节点是否在dom树当中，当表达式为true元素存在于dom树、反之从dom树中移除。

3.v-bind：用来为节点设置属性，①v-bind:attribute=‘表达式’，或者②:attribute=‘表达式’
EG:为元素添加类名的方法一利用三元表达式

        <img style="width: 200px; height: 100px;"  :class="isShow?'active':' '" :src='imgSrc'>
        <button @click='toggle'></button>

利用对象：

        <img style="width: 200px; height: 100px;"  :class="{active:isShow}" :src='imgSrc' >
        <button @click='toggle'></button>

4.综合应用：图片切换，该demo主要功能为实现点击按钮切换图片。
实现思路：

    <div class="app">
        <button @click='add' v-show='index!==imgSrc.length-1' >+</button>
        <img style="width: 200px; height: 100px;"  :src='imgSrc[index]' >
        <button @click='sub' v-show='index!==0'>-</button>
    </div>

  var vue=new Vue(
            {
                el:'.app',
                data:{
                    index:0,
                    imgSrc:['https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/189dd51f92df29dc1c68f683ad421bee.jpg?w=2452&h=920',
                    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340',
                    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340',
                    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340']
                },
                methods:{
                    add:function()
                    {
                        this.index+=1
                    },
                    sub:function()
                    {
                        this.index-=1
                    },
                }
            }

        )

利用数组存储数据，index记录数组下标值。

5.列表循环、表单元素绑定

1.v-for：用于生成列表结构的元素。采用以下语句可以实现。

  <div class="app">
    <ul>
        <li v-for='(item,key) in Obj'>
            {{item.name}}
        </li>
    </ul>

 var vue=new Vue(
            {
                el:'.app',
                data:{
                    index:0,
         
                    Arr:['你好','快乐','开心'],
                    Obj:[{name:'sss'},
                        {name:'aaa'}]
                }           
            }

        )

v-for指令特点如下

2.v-model：获取和设置表单元素的值（双向数据绑定）更改两边数据的任意一边都会同步更新值。
如下，就是将 message实现了双向绑定。