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. pandas.apply()函数

    1.介绍 apply函数是pandas里面所有函数中自由度最高的函数.该函数如下: DataFrame.apply(func, axis=0, broadcast=False, raw=False, ...

  2. oracle将时间加一天，加小时，加分，加秒

    前言 oracle 时间类型可以直接相加,但加的是天,以天为单位,我们了解了这个,加一天,一小时,一分,一秒就都简单了. 加一天 select to_date('2019-08-15 22:03:10 ...

  3. [Spring cloud 一步步实现广告系统] 11. 使用Feign实现微服务调用

    上一节我们使用了Ribbon(基于Http/Tcp)进行微服务的调用,Ribbon的调用比较简单,通过Ribbon组件对请求的服务进行拦截,通过Eureka Server 获取到服务实例的IP:Por ...

  4. （四十六）c#Winform自定义控件-水波进度条-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...

  5. 踏实型的TOGAF企业架构学习者要学什么？

    下载:本文PDF版 昨天有帮友在IT帮大本营微信群了问到 我打开ea网站的常见问题,截图回复了一下 如果让我再简单说一下该学什么,我想用下面这张图来说明 实操型的看 企业架构,从理论到实践 认证型的看 ...

  6. 看完这篇文章，我奶奶都知道什么是JVM中的内存模型与垃圾回收！

    扩展阅读:JVM从入门开始深入每一个底层细节 六.内存模型 6.1.内存模型与运行时数据区 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干不同数据区域. Java内存模型的主要目 ...

  7. 微信小程序新服务消息推送 —— 订阅消息

    微信团队前不久公测了「订阅消息」,原有的小程序模板消息接口将于 2020 年 1 月 10 日下线,届时将无法发送模板消息.「订阅消息」将完全替代「模板消息」,这两天得空测试了一波. 1.下发权限机制 ...

  8. 获取格式字符串第idx个值及实例

    --根据索引idx值获取格式串中第idx个值 如数据'11,12,13,14,15,16' 方法:格式串+分隔符:@str='11,12,13,14,15,16'+',' select dbo.Get ...

  9. MyBatis与log4j

    1.前言   在项目中编写Sysem.out.prinltn()的时候,是输出到控制台的,当项目发布到tomcat之后,是没有控制台的,不过可以在命令行界面还能看见,但是不容易观察一些输出结果.log ...

  10. 一个EMFILE问题定位：lsof、ulimit的应用，以及简单分析

    关键词:errno.EMFILE.ulimit.lsof等等. 背景是在对程序进行压力测试,运行了一段时间之后出现一个复位操作失败. 这个复位操作通过打开一个设备,进行读写操作,已达到控制GPIO输入 ...