Vue介绍以及模板语法-插值
1.Vue的介绍
Vue是一套用于构建用户界面的渐进式框架。
注意：Vue是一个框架，相对于jq库来说，是由本质的区别的：https://cn.vuejs.org/
Vue不支持IE8及一下版本，因为Vue使用了IE8无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
1.1 Vue实例对象
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的：
<body>
<div id="div">
{{user_name}}
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el:'#div', // 设置要操作的元素
// 要替换的额数据
data:{
user_name:' holle word'
}
})
</script>
2.模板语法-插值
使用{{}}的形式在HTML中获取实例对象对象中data的属性值；这种使用{{}}获取值得方式，叫做插值或插值表达式；
2.1文本
<body>
<div id="div">
文本插值 {{html_str}}
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
html_str:'<h2>这是文本<h2>'
}
})
</script>
2.2使用JavaScript表达式
<body>
<div id="div" >
{{ tt > 9 ? '大' : '小'}}
{{ dd() }}
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
tt:6,
dd:function(){return 1+2}
}
})
</script>
Vue介绍以及模板语法-插值的更多相关文章
- Vue实例与模板语法
VUE基础使用方法 一.安装 1.NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1].NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用.同时 Vue ...
- 前端框架VUE——数据绑定及模板语法
一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...
- angular,vue,react的基本语法—插值表达式，渲染数据，响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- Vue API 3模板语法 ，指令
条件# v-if# v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. v-show# v-show 指令也是用于根据条件展示一块内容.v-show ...
- Vue笔记之模板语法
插值 比较常用的就是插值,插值就是{{ foobar }}用两个大括号包起来的一个变量,显示的时候会将双大括号标签替换为这个变量的值. 基本的用法就是: <p>{{ message }}& ...
- vue学习笔记 模板语法（三）
<div id="kk"> <div>直接输出文本:{{msg}}</div> <div>自定义过滤器输出文本:{{msg|capi ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue.js模板语法介绍
Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 使 ...
- Vue介绍
1.Vue的简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 AP ...
随机推荐
- java并发编程-12个原子类
背景 多线程更新变量的值,可能得不到预期的值,当然增加syncronized关键字可以解决线程并发的问题. 这里提供另外一种解决问题的方案,即位于 java.util.concurrent.atomi ...
- windows平台多网卡设置路由
添加路由命令: route add 192.168.4.0 mask 255.255.255.0 192.168.4.1 metric 20 if 11 -p 其中192.168.4.0 是网络目标, ...
- 使用NodeJS模块-第三方提供的模块（什么是npm）
第三方开发者提供的模块 第三方模块是由NodeJS社区或第三方个人开发的功能模块,这些功能模块以软件包的形式存在.被发布在npmjs注册表中.npmjs是一个注册中心,所有软件包的信息都会被记录到该注 ...
- PHP删除数组中重复的元素
array_unique($arr): //删除重复元素 $arr = [1,2,3,0,1]; echo '<pre>'; var_dump($arr); $arr = array_un ...
- Java学习笔记（5）--- Number类和Math 类，String类的应用，Java数组入门
1.Number 和 Math 类: 在实际开发过程中,我们经常会遇到需要使用对象,而不是内置数据类型(int,double,float这些)的情形. 这种由编译器特别支持的包装称为装箱,所以当内置数 ...
- Codeforces Round #608 (Div. 2)
传送门 A. Suits 签到. Code /* * Author: heyuhhh * Created Time: 2019/12/15 17:16:33 */ #include <iostr ...
- 【cf1272】F. Two Bracket Sequences
传送门 题意: 给出\(s,t\)两个合法括号序列,现在找到一个长度最小的合法的序列\(p\),使得\(s,t\)都为其子序列. 思路: 考虑\(dp:dp[i][j][d]\)表示第一个串在\(i\ ...
- AcWing 801. 二进制中1的个数
网址 https://www.acwing.com/solution/AcWing/content/2066/ 题目描述给定一个长度为n的数列,请你求出数列中每个数的二进制表示中1的个数. 算法1主要 ...
- Yet Another Broken Keyboard
time limit per test2 secondsmemory limit per test256 megabytesinput: standard inputoutput: standard ...
- R语言-laohuji
项目三-tiger机 说明:每玩一次老ji游戏需要花费一元钱.钻石符号(DD)可以百搭,并且能够将最终的金额加倍. 任务分解: 任务分解的步骤: 将复杂的任务分解为一些简单的子任务: 使用实例: 用通 ...