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 ...
随机推荐
- vue组件化思想和模块化
组件化 注册组件的基本步骤 创建组件构造器 (调用Vue.extend()方法) 注册组件 (调用Vue.component()方法) 注册组件语法糖 省去了调用Vue.extend()的步骤,而是可 ...
- 记一次Ubuntu19无法安装docker源
按照各大网站以及个人习惯我会使用下面这种方法添加Docker源: root@ubuntu:~# sudo add-apt-repository "deb [arch=amd64] https ...
- JAVA描述算法和数据结构(01)：稀疏数组和二维数组转换
本文源码:GitHub·点这里 || GitEE·点这里 一.基本简介 1.基础概念 在矩阵中,若数值为0的元素数目远远多于非0元素的数目,并且非0元素分布没有规律时,则称该矩阵为稀疏矩阵:与之相反, ...
- Airtest 之 游戏自动化（5分钟教你王者农药刷金币）
一.准备工作: 1)安装腾讯手游助手,下载王者荣耀,安装启动( 你也可以直接连接手机启动游戏,或者使用其他的模拟器 ) 2)安装AirtestIDE,在设备窗中连接游戏Windows(详情参考笔者另 ...
- git clone克隆项目太慢，或者直接导致克不下来的解决办法（转载请注明出处）
从github下载项目下来,由于项目提交历史过多等各种原因导致文件太大,clone的时候非常的慢,或者直接出现 error: RPC failed; curl 18 transfer closed w ...
- ThinkPHP5.x.x各版本实战环境getshell
#这个文章我之前在t00ls已经分享过了 #内容只是对tp5的实战环境下getshell做的记录,中间遇到的一些小问题的突破,没啥技术含量 -5.1.18 http://www.xxxxx.com/? ...
- How to Check Device UUID or File System UUID. (Doc ID 1505398.1)
How to Check Device UUID or File System UUID. (Doc ID 1505398.1) APPLIES TO: Linux OS - Version Orac ...
- bps和pps
bps,比特率指的是每秒传输比特数 在实际所说的1M带宽的意思是1Mbps(是兆比特每秒Mbps不是兆字节每秒MBps) pps(数据包每秒),常用的网络吞吐率的单位(即每秒发送多少个分组数据包),网 ...
- 04-Node.js学习笔记-相对路径VS绝对路径
4.1相对路径VS绝对路径 大多数情况下使用绝对路径,因为相对路径有时候相对的是命令行工具的当前工作目录 在读取文件或者设置文件路径时都会选择绝对路径 4.2使用__dirname 获取当前文件所在的 ...
- qt qrc 资源文件
qt qrc 资源文件 qt qrc 资源文件 qt qrc 资源文件