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介绍以及模板语法-插值的更多相关文章

  1. Vue实例与模板语法

    VUE基础使用方法 一.安装 1.NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1].NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用.同时 Vue ...

  2. 前端框架VUE——数据绑定及模板语法

    一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...

  3. angular,vue,react的基本语法—插值表达式，渲染数据，响应式数据

    基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...

  4. Vue API 3模板语法 ，指令

    条件# v-if# v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. v-show# v-show 指令也是用于根据条件展示一块内容.v-show ...

  5. Vue笔记之模板语法

    插值 比较常用的就是插值,插值就是{{ foobar }}用两个大括号包起来的一个变量,显示的时候会将双大括号标签替换为这个变量的值. 基本的用法就是: <p>{{ message }}& ...

  6. vue学习笔记 模板语法（三）

    <div id="kk"> <div>直接输出文本:{{msg}}</div> <div>自定义过滤器输出文本:{{msg|capi ...

  7. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  8. Vue.js模板语法介绍

    Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? ​ 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 ​ 使 ...

  9. Vue介绍

    1.Vue的简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 AP ...

随机推荐

  1. Java实现自定义注解开发

    Java实现自定义注解开发 一直都对注解开发挺好奇的,最近终于有时间自己实践了一把,记录一下 万一后期会用到呢 哈哈哈 首先我们了解一下自定义注解的标准示例,注解类使用 @interface 关键字修 ...

  2. vscode 格式化代码 与 eslint 有冲突的问题解决

    项目中配置了eslint后,在使用vue界面里格式化的时候总是不一致.然后在配置中加了配置也无效(File - Preference - Setting) 查了下原因是在vue开发的时候我们一般都安装 ...

  3. CSS置换元素和非置换元素

    置换元素: 1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素.  2. 置换元素就是浏览器根 ...

  4. Java入门系列之StringBuilder、StringBuffer（三）

    前言 上一节我们讲解了字符串的特性,除了字符串类外,还有两个我们也会经常用到的类,那就是StringBuffer和StringBuilder.因为字符串不可变,所以我们每次对字符串的修改比如通过连接c ...

  5. 《ServerSuperIO Designer IDE使用教程》- 7.增加机器学习算法，通讯采集数据与算法相结合。发布：4.2.5 版本

    v4.2.5更新内容:1.修复服务实例设置ClearSocketSession参数时,可能出现资源无法释放而造成异常的情况.2.修复关闭宿主程序后进程仍然无法退出的问题.2.增加机器学习框架.3.优化 ...

  6. 随意看看AtomicInteger类和CAS

    最近在读jdk源码,怎么说呢?感觉收获还行,比看框架源码舒服多了,一些以前就感觉很模糊的概念和一些类的用法也清楚了好多,举个很简单的例子,我在读Integer类的时候,发现了原来这个类自带缓存,看看如 ...

  7. PHP学习—了解篇2

    使用PHP 表单 表单处理: PHP超全局变量:$_GET 和 $ _POST 用于处理表单数据(form-data) < form > 表单标签 ​ action属性:规定表单数据提交U ...

  8. sqlmap总结

    转自:http://www.zerokeeper.com/web-security/sqlmap-usage-summary.html 0x01 需要了解 当给 sqlmap 这么一个 url 的时候 ...

  9. Android Gradle 学习笔记（三）：Gradle 日志

    在第一节,我们使用到了gradle -q hello命令行来运行Hello World,并对Hello World进行了简单的分析,了解到 gradle -q hello 的意思是要执行的build. ...

  10. Java实现命令行中的进度条功能

    前言 最近在写一个命令行中的下载工具,既然是下载文件用的,那么实时显示下载进度是非常有必要的.因此,就有了这里对进度条的实现尝试. 预览图 还是先预览下效果图吧. 这里是cmd里面的效果,总体看着还行 ...