Vue的基本操作

一、使用VUE

1、引入vue.js文件

//下载后导入
<script src=vue.js></script>

2、通过下面的代码展示用，创建一个Vue的实例，然后通过应用的id嵌入根元素，将数据放入一个对象data中，并且将表达式传入div中{{msg}}（一定注意必须是双大括号）

<div id="app">
  {{ msg}}
</div>
 
//建立vue对象，固定格式
new Vue({
  el: '#app',   //通过id嵌入元素，el是元素ELEMENT的缩写
  data: { 
    msg: 'Holle Word!'
  }
})

二、指令

指令：带有前缀 v-，以表示它们是 Vue 提供的特殊特性，通过属性来操作元素。
1、v-model

v-model:实现了数据和视图的双向绑定
 分成了3步：
 1）把元素的值和数据相互绑定
 2）当输入内容时，数据同步发生变化，视图  ---数据的驱动
 3）当改变数据时，输入内容也会发生变化，数据-》视图的驱动
例子：利用vue中的v-model把input标签与data数据中msg属性进行双向绑定，msg可以有默认值也可以默认为空！
<div id="app">
    <input type="text" v-model="msg">
    <h1>{{msg}}</h1>
</div>
 
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"Holle Word !"
        }
    })

2、v-bind

<div id="app">
    <a v-on:href="url">我</a>
</div>
<script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                url: "http://www.qq.com"
            },
        })
    </script>

3、v-text

// v-text 在元素中插入文本，比较单一
<div id="app">  
    <h1 v-text="msg">{{msg}}</h1>
</div>
 
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"Holle Word !"
        }
    })

4、v-html

// v-html:在元素不中不仅可以插入文本，还可以插入标签，多样化
<div id="app">
<h1 v-html="hd"></h1>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            hd: "<input type='button' value='提交'>",
            str: "我要发财!"
        }
    }) 

5、v-if – v-show – v-on
// v-if: 根据表达式的真假值来动态插入和移除元素，下面的例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
// v-show:根据表达式的真假值来隐藏和显示元素

<div id="app">
       <p v-if="pick">我是刘德华</p>
       <p v-else>我是张学友</p>
        
       <p v-show="temp">我是赵本山</p>
       <p v-show="ok">你喜欢我吗？</p>
 
</div>
<script>
    var vm = new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                pick: false,
                temp: true,
                ok: true
            }
        })
<script>        

<div id="app">
          <input type="button" value="点我吧!" v-on:click="show()">
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                arr: [11,22,3344,55],
            },
            methods: {
                show: function () {
                    this.arr.pop();
                }
            }
        })
    </script>

6、v-for

根据变量的值来循环渲染元素

<div id="app">
  <ul>
    <li v-for="item in todos">
      {{ item.text }}
    </li>
  </ul>
</div>
var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

// 循环列表有两个参数，一个为元素中的数据，另一个为索引值
 <div id="app">
        <ul>
            <li v-for="(item,index2) in arr">
                {{item}}: {{index2}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                arr: [11,22,33,44,55],
            }
        })
    </script>

// 循环字典时，有三个参数，元素中的value值，key，索引值
<div id="app">
          <ul>
            <li v-for="(item,key,index) in obj">
                {{item}}: {{key}}:{{index}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"},
            },
        })
    </script>