Vue的基本用法

Vue的第一个代码

1. 首先需要导入Vue：

<script src="../vue.js"></script>
在官方网站下载源代码，并导入scritp

2. 第二步创建对象：
   创建Vue对象的时候，传入了一些options：{ }

• { }包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素
• { }包含了data属性：该属性中通常会存储一些数据

<div id="app">{{message}}</div>
<script>
	//const 常量
	//let 变量
	const app = new Vue({ //用于挂载要管理的元素
	    el: '#app',
	    data: {
	        message: "Hello Vue"
	    }
	});

</script>

列表的展示

展示一个更加复杂的数据：数据列表
比如现在从服务器请求过来一个列表
希望展示到HTML中

<div id="app">
    <ul><li v-for="item in movies">{{item}}</li></ul>
</div>
<script>
   const app = new Vue({
        el: '#app',
        data: {
            message: "Hello Vue",
            movies:["美国队长2","复仇者联盟4","钢铁侠1","蜘蛛侠3","雷神"]
        }
    })

</script>

此数据还是响应式的，也就是说当数组中的数据发生变化时，界面会自动改变。
控制台如果想加入新的元素：

案例-计数器

实现一个计数器：
点击+，计数器+1,
点击-，计数器-1

这里需要引入这个新的指令和属性：

• 新的属性：methods，该属性用于Vue对象中定义方法
• 新的指令：v-on:click=’’ ‘’,该指令用于某个元素的点击事件，并且需要指定当发生点击时，执行的方法

<div id="app">
       <h2>当前计数：{{counter}}</h2>
       <button v-on:click="add">+</button>
       <button v-on:click="sub">-</button>
</div>
<script>
   const app = new Vue({
        el: "#app",
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                this.counter++;
            },
            sub: function () {
                this.counter--;
            }
        },
    })
</script>

mustache语法

又名双大括号语法

基本用法：

    <div id="app">
        <h4>{{firstname +" "+lastname}}</h4>
        <h4>{{firstname}} {{lastname}}</h4>
        <h4>你好，{{lastname}}</h4>
    </div>
    <script>
        const app =new Vue({
            el:"#app",
            data:{
                firstname:"法外狂徒",
                lastname:"张三"
            },
        })
    </script>

指令

v-once

{{…}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{…}} 标签内容也会更新。

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

 <h4>你好，{{lastname}}</h4>
 <h4 v-once>你好，{{lastname}}</h4>

v-html

某些情况下，从服务器请求到的数据本身是一个HTML代码，如果直接通过{{…}}来输出，会将HTML代码一起输出，但是这违背了使用数据的初衷。
v-html可以将带有标签形式的数据，解析成对应的形式呈现出来。

<h2>{{url}}</h2>
<h2 v-html="url"></h2>

<script>
    const app =new Vue({
        el:"#app",
        data:{
            firstname:"法外狂徒",
            lastname:"张三",
            url:"<a href='www.baidu.com'>百度一下</a>"
        },
    })
</script>

v-pre

用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

<h2>{{firstname}}</h2>
<h2 v-pre>{{firstname}}</h2>     

v-cloak

在某些情况下，浏览器会直接显示出未编译的Mustache标签

<style>
    [v-cloak]{
        display: none;
    }
</style>


<div id="app">
    <h2 v-cloak>{{firstname}}</h2>    
</div>
<script>
    setTimeout(function(){
        const app =new Vue({
        el:"#app",
        data:{
            firstname:"法外狂徒",
            lastname:"张三",
            url:"<a href='www.baidu.com'>百度一下</a>"
        }
    })},1000)
</script>

页面一开始暂时不显示任何内容，之后才会显示出来