VUE（一）

下载word文档 请点击

VUE（一）

1. 创建一个vue 例

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：

<script>
				

var vm = new Vue({
  el: '#example', data: data }) 

</script>

 

到这里我们就创建了一个vue的实例，vue实例其实就是一个虚拟处理空间，在页面打开时vue把需要加载的内容加载进空间，进行渲染处理后展示结果，所以在引用vue的时候我们需要把引用放在页面的最上边，放到挂载实例模块的下边那么这个实例就不会被加载到vue空间。

    data数据对象参数解释：当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生"响应"，即匹配更新为新的值。我们可以把data当作一个对象中的成员变量来看。

    el解释：每一个vue的实例都需要挂载到一个dom上，el就是指定vue实例挂载到哪个模块上。我们可以通过#id来指定

1. 模板与数据

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

2.1模板之插入

        2.1.1.解析成文本

        数据绑定最常见的形式就是使用"Mustache"语法 (双大括号) 的文本插值：

        <span>Message: {{ msg }}</span>

    例子：

        <!--test1：数据绑定最常见的形式就是使用"Mustache"语法 (双大括号) 的文本插值：并且可以动态的去更新-->

        <span id="app">Message: {{ msg }}</span>

        <script>

            var app = new Vue({

                 el: '#app',

                 data: {

                  msg: 'Hello Vue!'

        }

                })

        </script>

        运行后：        

这种绑定无论何时只要msg属性发生改变那么选然后的结果也会动态更新，可以尝试在控制台输入app.msg='Vue!'，看看会不会发生变化。

如果不想使它变成动态的可以在标签上加 v-once 指令

<span v-once>这个将不会改变: {{ msg }}</span> 

 

2.1.2.解析成html代码

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

        <span v-html="rawHtml"></span></p>
							

    例子：

        <!--test2：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令-->

        <div id="app2">

            <!--普通文本-->

            <p>Using mustaches: {{ rawHtml }}</p>

            <!--html代码-->

            <p>Using v-html directive: <span v-html="rawHtml"></span></p>

        </div>

        <script>

            var app2 = new Vue({

                 el: '#app2',

                 data: {

                 rawHtml: '<span style="color: red;">演示：</span>'

                 }

                })    

        </script>

运行结果：

2.1.3特性绑定

    Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：其实就是给属性赋值

<div v-bind:id="dynamicId"></div>

    例子：
					

        <!--test3：Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
					

            其实就是指标签上的属性
					像class  src等
					

            缩写<div :id="dynamicId">演示特性id</div>

        -->

        <div id="app3">

            <div v-bind:id="dynamicId">演示特性id</div>

            <!--在这里如果 isButtonDisabled为null、undefined 或 false   则disabled属性将不会被渲染出来-->

            <button :disabled="isButtonDisabled">Button</button>

        </div>

运行结果：

2.1.4使用 JavaScript 表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

        <!--test4：使用 JavaScript 表达式每个绑定都只能包含单个表达式-->

        <!-- 这是语句，不是表达式 -->

        <!--{{ var a = 1 }}-->            

        <div id="app4">

            {{ number + 1 }} ==>3

            {{ ok ? 'YES' : 'NO' }} ==>YES

            {{ message.split('').reverse().join('') }}

            <div v-bind:id="'list-' + id"></div> <!--==>id=list-2-->

        </div>

2.2指令

        <!--test5：指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式（v-for 是例外）-->

        <!--例如之前的：-->

        <div id="app5">

            <p v-if="seen">现在你看到我了</p>

            <!--指令参数一些指令能够接收一个"参数"，在指令名称之后以冒号表示。-->

            <a v-bind:href="url">...</a>

                <!--另一个例子是 v-on 指令，它用于监听 DOM 事件：在这里参数是监听的事件名之后单讲-->

                <a v-on:click="doSomething">...</a>

        </div>

 

        <!--修饰符-->

        <!--test6：修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定-->

        <form v-on:submit.prevent="onSubmit">...</form><!--prevent表示阻止表单提交之后在讲-->

 

2.3指令缩写

        <!--test6：Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：-->

        <!--v-bind 缩写-->

            <!-- 完整语法 -->

            <a v-bind:href="url">...</a>

            <!-- 缩写 -->

            <a :href="url">...</a>

        <!--v-on 缩写-->    

            <!-- 完整语法 -->

            <a v-on:click="doSomething">...</a>

            <!-- 缩写 -->

            <a @click="doSomething">...</a>