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 ...
随机推荐
- Python的生成器和生成器表达式
一,生成器和生成器表达式 什么是生成器,生成器实质就是迭代器,在python中有三种方式来获取生成器: 1. 通过生成器函数 和普通函数没有区别,里面有yield的函数就是生成器函数,生成器函数在执行 ...
- react+ant-mobile+lib-flexible构建移动端项目适应设计图尺寸(750)
使用lib-flexible在react中先安装 npm install lib-flexible --save 因为插件使用的是rem适配,所以安装两个插件 npm install postcss- ...
- css实现左右两个div等高
提出问题: 现在有两个div,但是两个div里面内容多少不确定,可能左边多,可能右边多,css要如何设置可以保证左右两边的div等高呢? 解决方案: 每个div使用display:table-cell ...
- Docker容器日志路径
/var/lib/docker/containers/容器ID/容器ID-json.log 可以通过这个路径收集日志到ES中
- Gson 格式化JSON日期数据
Google的Gson功能非常强大! 格式化日期我们只需要这样创建就好了 Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd hh ...
- JavaWeb问题记录——在Windows上启动Tomcat后命令行窗口乱码
JavaWeb问题记录——在Windows上启动Tomcat后命令行窗口乱码 摘要:本文主要记录了在Windows上启动Tomcat后,命令行窗口出现乱码的问题及解决办法. 问题重现 在Windows ...
- 池化HttpClient，拿去就能用
import lombok.extern.slf4j.Slf4j; import org.apache.http.HttpEntity; import org.apache.http.HttpResp ...
- C#基本语法<二>_线程
线程 多线程和异步函数 当异步线程在工作完成时如何通知调用线程 当异步线程出现异常的时候该如何处理 异步线程工作的进度如何实时的通知调用线程 如何在调用线程中取消正在工作的异步线程,并进行回滚操作 异 ...
- SpringCloud（二）：服务的注册与发现（Eureka）
一.什么是服务注册与发现Spring Cloud Eureka 模块提供的功能是被动式的服务发现. 服务注册:每个用户去聊天室服务器上注册. 服务发现:这样他的好友们就能看到你,你同时也将获取好友的上 ...
- cmdb项目-2
1.命令插件异常处理 + 日志采集 1)为了更清楚发送客户端收集信息的状态 ,优化返回api的数据 ,变为字典存储 {状态 错误信息 数据} ,因为每个插件的每种系统下都要这个返回值我们将他单独做成类 ...