Vue的基本用法

Vue的第一个代码

1. 首先需要导入Vue：

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

1. 第二步创建对象：
   创建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>

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