day88 Vue基础

1.创建Vue实例？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id = 'app'>
        <h5>site:{{site}}}</h5>
        <h5>url:{{url}}</h5>
        <h5>{{details()}}</h5>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                site:'菜鸟教程',
                url:"www.runoob.com",
                alexa:'10000'
            },
            methods:{
                details:function(){
                    return this.site + '- dream,wake up !'
                }
            }
        })
    </script>
</body>
</html>

每个Vue程序首先使用以下函数创建一个Vue的实例：

　　var vm = new Vue({details options})

尽管与MVVM没有关联，但vue的设计模式受其启发，所以我们经常会用vm作为（ViewMode）的缩写，来引用我们的vue实例。

Vue中的数据与方法？

　　创建vue实例时，它会将data中找到的所有属性添加到vue的反应系统中，当这些属性的值发生变化时，视图将反应、更新，以匹配新值。

//我们的数据对象
var data = { a：1 }

//将对象添加到Vue实例
var vm = new Vue（{ 
  data：data 
}）

//获取实例上的属性
//返回原始数据中的
属性vm.a == data.a // => true

//在实例上设置属性
//也会影响原始数据
 vm.a = 2
 data.a // => 2

// ...反之亦然
 data.a = 3
 vm.a // => 3

当数据修改时，视图会重新呈现，

如果你知道你以后需要一个属性，但它开始是空的或不存在的，你需要设置一些初始值。例如：

data：{ 
  newTodoText：''，
  visitCount：0，
  hideCompletedTodos：false，
  todos：[]，
  error：null
 }

模板语法：

　　插补：

（1）文本：最基本的数据绑定形式是使用“mustache”语法，双花括号的文本差值。

< span >消息：{{msg}} </ span >

mustache将替换msg相应数据对象上的属性值。每当数据对象上的msg的属性值发生变化时，它也会更新。

您还可以使用v-once指令执行不会更新数据更改的一次性插值，但请记住，这也会影响同一节点上的任何其他绑定：

< span  v-once >这永远不会改变：{{msg}} </ span >

（2）原始HTML

　　双花括号将数据对象中的“<a href = 'http://www.baidu.com'>点我</a>”属性解释为纯文本，而不是HTML，要输入真实的HTML，需要使用指令“v-html”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id = 'app'>
        <h5 v-html = 'url'></h5>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                url: "<a href = 'http://www.cnblogs.com/zsdbk'>message</a>",
            }
        })
    </script>
</body>
</html>

注：在网页上动态呈现HTML可能非常危险，因为它很容易导致xss漏洞，所以请对信任的内容进行插值操作。

（3）属性：

　　Mustaches不能再HTML中使用，但是可以用v-bind指令。

< button  v-bind：disabled = “isButtonDisabled” >按钮</ button >

如果数据对象中isButtonDisabled的属性值是null,undefiend,false,那么disabled 属性不会再当前button标签中生效。

（4）使用JavaScript表达式；

　　vue.js 支持JavaScript中的所有数据绑定功能

例如：

　　三元运算：　　

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

　　指令(directives)：

　　　　是带有v-前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

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

如果‘seen’的值为真，则在视图中显示所插入的文本内容，否则则不显示此标签。

　　（1）参数：

　　　　v-bind指令可以接收一个参数，并且响应式的更新html特性。

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

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

　　　　v-on指令用于监听DOM事件。

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

在这里参数是监听的事件名。

　　（2）修饰符：

　　修饰符（modifiers）是以半角句号“.”指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。

　　例如，

　　　　.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

用于阻止form表单的submit默认事件。(阻止 submit .prevent)

　　缩写：

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，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>

posted @ 2018-07-24 17:54 Coca-Mirinda 阅读(181) 评论(0) 编辑收藏举报

刷新页面返回顶部

Coca-Mirinda

day88 Vue基础

v-bind 缩写

v-on 缩写

公告

`v-bind` 缩写

`v-on` 缩写