vue.js模板

作者: 痛心凉 | 来源:发表于2017-10-10 16:16 被阅读0次

vue.js模板语法

vue.js使用了基于HTML的模版语法,允许开发者声明式地将Dom绑定至底层vue实例的数据。
vue.js的核心是一个允许你采用简洁的模版语法来声明式的将数据渲染进Dom的系统。结合响应系统,在应用状态改变时,vue能够智能地计算重新渲染组件的最小代价并应用到Dom操作上。

插值

文本
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:

< div id="app" >
<p>{{ message }}</p>
</div>

表达式

常用的表达式:三目运算,算术运算,比较运算,逻辑运算,正则表达式等

三目运算:条件?“条件1”:“条件2”
算术运算:加、减、乘、除、取余
比较运算:大于、小于、

Vue 实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的:

var vm = new Vue({
// 选项
})
属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性:

var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。例如:

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 vm.a 改变后调用
})

相关文章

  • Vue 入门2 基础篇

    [TOC] Vue.js 基础部分包括 Vue.js的组成 (template, script,style) 模板...

  • 用 Vue.js 做代办事宜列表

    前提条件 Vue.js 介绍 Vue.js 模板语法 Vue.js 组件 概要 类型:实践难度:中等 任务描述 做...

  • Vue.js模板语法

    Vue.js模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的教...

  • 学习笔记(十七)Vue.js源码剖析 - 模板编译和组件化

    Vue.js 源码剖析 - 模板编译和组件化 模板编译简介 模板编译主要目的是将模板(template)转换为渲染...

  • vue.js总结

    django模板语言与vue.js冲突问题 方法1: 修改vue.js绑定符`Vue.config.delimit...

  • Vue基础(二)--模板和过滤器

    模板 1.简介 Vue.js使用基于HTML的模板语法,可以将DOM绑定到Vue实例中的数据模板就是{{}},用来...

  • Vue - 模板语法

    在vue中模板是什么? 这个就是模板: Vue.js 使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定...

  • Vue.js:使用vue-cli快速构建项目

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。 1、npm install -g v...

  • 模板语法

    Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 ...

  • Vue.js 模板语法

    Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 ...

网友评论

    本文标题:vue.js模板

    本文链接:https://www.haomeiwen.com/subject/vaavyxtx.html