来自 计算机教程 2019-08-26 14:02 的文章
当前位置: 美洲杯冠军竞猜 > 计算机教程 > 正文

篮球世界杯冠军竞猜Vue.js每天必学之数据双向绑

介绍

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板,请记住这点。

前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。

插值

Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。

文本

可以去 这里下载 。自己整理了一个Vue.js的demo, https://github.com/chenhao-ch/demo-vue

数据绑定最基础的形式是文本插值,使用 “Mustache” 语法(双大括号):

快速入门 以下代码是Vue.js最简单的例子, 当input中的内容变化时,p节点的内容会跟着变化。

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

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new Vue({
 el: '#demo',
 data: {
  message: 'Hello Vue.js!'
 }
})

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

语法介绍

你也可以只处理单次插值,今后的数据变化就不会再引起插值更新了:

数据绑定 数据绑定就是指将js中的变量自动更新到html中。如下代码, message的默认值是“Hello Vue.js!”, 那么当页面启动时,html中的默认值会被设置成“Hello Vue.js”

<span>This will never change: {{* msg }}</span>

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new Vue({
 el: '#demo',
 data: {
  message: 'Hello Vue.js!'
 }
})

篮球世界杯冠军竞猜,原始的 HTML

如果要输出原生的html,可以使用三个大括号来实现

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串,需要用三 Mustache 标签:

<p>{{{messageHtml}}}</p>

<div>{{{ raw_html }}}</div>

也可以做表达式的绑定

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断,应当使用 partials。

<div>{{length - 1}}</div>
<div>{{isShow ? 'block' : 'none'}}</div>

在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住,只对可信内容使用 HTML 插值,**永不**用于用户提交的内容。

过滤器**
**表达式后面可以添加过滤器,对输出的数据进行过滤。

HTML 特性

<div>{{ message | capitalize }}</div>

Mustache 标签也可以用在 HTML 特性 (Attributes) 内:

自定义过滤器
Vue.js运行自己定义过滤器。比如:

<div id="item-{{ id }}"></div>

Vue.filter('wrap', function (value, begin, end) {
 return begin   value   end;
})
<!-- 'vue' => 'before vue after' -->
{{ message | wrap 'before' 'after' }}

注意在 Vue.js 指令和特殊特性内不能用插值。不必担心,如果 Mustache 标签用错了地方 Vue.js 会给出警告。

指令

绑定表达式

指令是特殊的带有前缀v-的特性。当表达式的值发生变化时,响应应用特定的行为到DOM。

放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中,一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。

<!-- 当greeting为true时,才显示p节点 -->
<p v-if="greeting">hello</p>
<!-- 绑定href属性为js中url的值 -->
<a v-bind:href="url"></a>
<!-- 绑定事件,btnClick是js方法 -->
<button v-on:click="btnClick"></button>

JavaScript 表达式

bind,on指令可以进行缩写

到目前为止,我们的模板只绑定到简单的属性键。不过实际上 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式:

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

<button v-on:click="btnClick"></button>
<button @click="btnClick"></button>

{{ number 1 }}

自定义指令

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

Vue.directive('demo', {
 bind: function () {
  // 准备工作
  // 例如,添加事件处理器或只需要运行一次的高耗任务
 },
 update: function (newValue, oldValue) {
  // 值更新时的工作
  // 也会以初始值为参数调用一次
 },
 unbind: function () {
  // 清理工作
  // 例如,删除 bind() 添加的事件监听器
 }
})

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

html模板

这些表达式将在所属的 Vue 实例的作用域内计算。一个限制是每个绑定只能包含单个表达式,因此下面的语句是无效的:

Vue.js支持对js对象进行判断(if), 循环(for)输出。类似于前端模板。

<!-- 这是一个语句,不是一个表达式: -->
{{ var a = 1 }}

<!-- 判断,如果ok为true,则显示yes, 如果为false, 显示no -->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

<!-- 类似于v-if, v-if是是否加节点, v-show是display是否为none -->
<h1 v-show="ok">Hello!</h1>

<!-- 循环, 对items属性进行循环。 track-by指item的是否重复,对重复的进行服用 -->
<!-- 循环中, $index表示数组第n个元素; $key表示对象的key -->
<ul id="example-1">
 <li v-for="item in items" track-by="_uid">
  {{ $index }} : {{ item.message }}
 </li>
</ul>
var example1 = new Vue({
 el: '#example-1',
 data: {
  items: [
   {_uid: '1', message: 'Foo' },
   {_uid: '2', message: 'Bar' }
  ]
 }
})

<!-- 流程控制也不可以,可改用三元表达式 -->
{{ if (ok) { return message } }}

样式绑定

过滤器

样式也可以根据js中的变量来动态确定。

Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符”指示:

<!-- isA 为true时, class多一个class-a -->
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
<!-- classA, classB 两个变量的值设置成class -->
<div v-bind:class="[classA, classB]">

<!-- 绑定style, 自动添加前缀,styleObject里面是style键值对 -->
<div v-bind:style="styleObject"></div>

{{ message | capitalize }}

事件绑定

这里我们将表达式 message 的值“管输(pipe)”到内置的 capitalize 过滤器,这个过滤器其实只是一个 JavaScript 函数,返回大写化的值。Vue.js 提供数个内置过滤器,在后面我们会谈到如何开发自己的过滤器。

可以使用v-on指令来监听DOM事件。

注意管道语法不是 JavaScript 语法,因此不能在表达式内使用过滤器,只能添加到表达式的后面。

本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:篮球世界杯冠军竞猜Vue.js每天必学之数据双向绑

关键词: