初识VUE以及vue的常用指令

1、VUE的基本结构

在html中需要有一个盒子来定义内容的范围：

<div id="app" v-cloak></div>

在JavaScript中需要先引入vue.js的本地连接或者在线链接，然后再new一个VUE：

new Vue({
            el: '#app', //Vue的作用对象是ID名为app的盒子，也就是html中的盒子
            data() {//数据，所有变量都需要在data函数中初始化。
                return {

                }
            },
            methods(){//方法，在盒子中的函数都要此处写清楚其具体操作
            },
        })

2、Vue的常用指令

常用指令有v-on,v-for,v-if,v-else,v-model,v-show,v-cloak,v-bind（举例的命令都再ID名为app的）

 <div  id="app">
        {{nickname}}
         <!-- 用{{}}包裹的变量名，可以将数据渲染到页面中 -->
        <hr>
        {{name}}
     </div>

1、v-on

   <button v-on:click='reverser'>reverse</button>
    <!-- 只认识纯文本 -->
     <!-- click为事件，也可以是其他的鼠标键盘事件 -->
     <button @click='test'>add</button>
    <!-- test为方法名,   v-on:click可以简写为@click,函数后面的(),可写可不写-->

2、 v-html

<div v-html='nickname'></div>
<!-- 可以识别html标签 -->

3、 v-for为循环， item是每一个元素，i为下标,in后的为数组（数组中的对象有多少就执行几次）或者是数字（数字即为执行多少次）

  <h2 v-for='(item ,i) in 3'>hello{{item}} {{i}}</h2>
    <h3 v-for='(item ,i) in list'>{{i+1}}、{{item}}
        <button @click='del(i)'>删除</button>
    </h3>
    <h4 v-for='(item ,i) in list2'>{{item.id}}、{{item.name}}
        <button @click='del2(i)'>删除</button>
    </h4>

4、 v-show。v-show 的参数为true就显示，若isshow为false===display：‘none’ ，若项频繁切换是否显示的用v-show

<h1 v-show='isshow'>标签一直都在</h1>
<button @click="isshow=!isshow">切换</button>

6、v-if和v-else 。 v-if为true标签存在并显示，为false则删除此标签且显示v-else中的内容;;只显示一次的时候使用，例如登录，登录了显示用户名

<h1 v-if='islogin'>Simba</h1>
<h1 v-else>请登录</h1>
<button @click='islogin=!islogin'>{{islogin?'退出':'登录'}}</button>
//{{}}中可以写js表达式

6、v-model(双向绑定，当其中的内容发生变化时，其他位置的相关变量也会发生变化)。例如在输入框中将haha改变为Ace，下面的{{name}}也会变成Ace

  昵称: <input @keydown.enter='login' type="text" v-model.trim='name'>
  {{name}}

7、v-bind（当属性值为变量时，需要使用v-bind）例如下面的图片的src为变量

<ul>
    <li v-show="i==activeIndex" v-for='(item,i) in list3' :class="{active:i==activeIndex}">
        <img v-bind:src="item" :id='i' :title='item' :style="{width: w,height: h}" alt="">
        <!-- 'v-bind:'可以简写为'：' -->
    </li>
</ul>

8、v-cloak
在默认情况下，如果vue加载有延迟或者数据比较多，会使用户看到字符串模板，观感不好。
vue实例在渲染完成后，会将el对应的DOM元素上的v-cloak属性去掉，我们可以利用此特性，写一个属性选择器。
形如

[v-cloak]{
  display:none;    
}

 <script>
        new Vue({
            el: '#app',
            data() { //data是个函数
                return {
                    nickname: '
simba
',
                    name: 'haha',
                    isshow: true,
                    islogin: true,
                    list: ['haha', 'hjs', 'jw'],
                    list2: [{
                            id: 1,
                            name: 'haha'
                        },
                        {
                            id: '2',
                            name: 'hjs'
                        }, {
                            id: '3',
                            name: 'jw'
                        },
                    ],
                    list3: ['http://p1.music.126.net/CRGFzpemhyGUCBKAiM8qIA==/109951165132047470.jpg?imageView&quality=89',
                        'http://p1.music.126.net/58n4OWp1KP3P0cpwGvByUg==/109951165132922681.jpg?imageView&quality=89',
                        'http://p1.music.126.net/bHVNR6ZAB1euK9HkdW9cyg==/109951165133548019.jpg?imageView&quality=89',
                    ]
                }
            },
            methods: {
                test() { //可以写入行内
                    alert(this.name)
                },
                reverser() {
                    this.name = this.name.split('').reverse().join('')
                },
                del(i) {
                    this.list.splice(i, 1)
                    //根据下标删除元素，从i开始，删除一个
                },
                del2(i) {
                    this.list2.splice(i, 1)
                    //根据下标删除元素，从i开始，删除一个
                },
                login() {
                    console.log(this.nickname);
                }
            },

        })
    </script>