vue的插值语法及el和data、methods语法释义

插值语法是通过一对{{}}进行书写，内部是对data数据管理中心的属性进行渲染，也可以是表达式
moustache（胡子）是双大括号学名，也叫（胡子语法）

内部也可以存放表达式

{{a >= 100 ? 20 : 10}}

注意，表达式支持简单，比如简单判断，比如三元表达式，不可以使用if等等复杂判断

{{if(a>200){a=100}else{a=300}}}

上面的写法是错误的，因为不支持使用复杂判断
我们需要注意的是，所有的对象中的清单内容，都是Vue规定，内置的，不可以自由发挥

<body><div id="app">{{b}}</div><script src="js/vue.js"></script><script>var vue = new Vue({// 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用el: '#app',// 数据管理中心，所有的Vue的数据都在data对象中data:{a: 100},// 方法，对应的Vue事件方法清单methods:{},content:{b: 200}})</script>
</body>

上面代码中content对象是我们自己随意创建的，所以是不支持在Vue中使用的.

vue的插值语法及el和data、methods语法释义相关推荐

从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理
root容器里的代码被称为模板,有了模板会有特殊的模板语法.Vue模板中语法有两大类,一类是插值语法,另一类是指令语法. 插值语法功能:用于解析标签体内容.写法:{{xxx}},xxx为js表达式, ...
【Vue】组件的创建以及 data methods 属性的使用
本文我们来介绍下Vue中的组件,组件是可复用的 Vue 实例,且带有一个名字. 组件的创建 extend方式首先通过 Vue.extend 方法来定义一个全局组件.template 就是组件将来要展 ...
【Vue】一个案例带你搞懂methods、watch及computed的使用规则
本文我们通过案例来介绍一下vue中 watch 和 computed 的使用规则,案例效果如下: 以上案例就是实现一个简单的名称拼接处理.实现的方式有很多,本文我们将采用以下三种方式来实现. 1.D ...
Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结二.模板语法 1.插值语法 2.指令语法三.数据绑定 1.单向数据绑定(v-bind) 2 ...
Vue中的hellow world描述el与data的基本使用--Vue知识点归纳(一)
本文中将描述: 第一个Vue程序的开发使用 Vue 中的属性 el 基本使用说明 Vue 中的属性 data 操作数据使用说明 1 Vue 中的hellow world <!DOCTYPE ht ...
vue中插值语法中v-for() of 与v-for() in 遍历对象数组的异同，以及for in for of在方法中遍历对象和数组的异同
写这个的目的是记录下Vue中使用v-for-in v-for-of遍历对象与遍历数组的区别,以及JS中使用for-in for-of 遍历对象和数组的区别. 直接说结论,节约大家时间,下面是推论,有时 ...
VUE的el和data的写法以及MVVM模型、VUE的数据代理
第一.VUE的el和data的两种写法: el的两种写法如下: 第一个形式如下: const v = new Vue({//第一种el的写法el:'#demo',data: {name: '三清祖师' ...
Vue el和data的两种写法
1.5 el 与 data的两种写法 el 有两种写法 1.创建Vue实例对象的时候配置el属性 2.先创建Vue实例,随后再通过vm.$mount('#root')指定 el 的值 data 有两种 ...
Vue之概述、基本使用、data数据和if条件渲染
一.Vue概述 Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增. Vue.js读音 ...

vue的插值语法及el和data、methods语法释义

vue的插值语法及el和data、methods语法释义相关推荐

最新文章

热门文章