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学习笔记之面向对象、static关键字

    一周Java学习总结 今天就总结理清一下关于面向对象和面向过程的程序设计的一些不同特点,以及讲下static关键字. 面向对象 现在接触的Java是面向对象的,现在的程序开发几乎都是以面向对象为基础的 ...

  2. 50行Python代码实现视频中物体颜色识别和跟踪

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 机器学习与统计学 PS:如有需要Python学习资料的小伙伴可以加 ...

  3. iOSMultipeerConnectivity使用

    MultipeerConnectivity是iOS7推出的多点连接框架,多用于文件传输,类似于iOS设备的airTrop隔空投放,在没有联网的情况下也能聊天传文件. 使用方法,一个设备作为广播开放Pe ...

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

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

  5. Spring Cloud中五大神兽总结(Eureka/Ribbon/Feign/Hystrix/zuul)

    Spring Cloud中五大神兽总结(Eureka/Ribbon/Feign/Hystrix/zuul) 1.Eureka Eureka是Netflix的一个子模块,也是核心模块之一.Eureka是 ...

  6. 201871010102-常龙龙《面向对象程序设计（java）》第十四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  7. WINDOWS代理服务器搭建 - Apache httpd

    1.检查电脑系统类型 检查电脑版本是为 32位操作系统 还是 64位操作系统 2.下载安装Apache Httpd 下载地址:https://www.apachehaus.com/cgi-bin/do ...

  8. LeetCode 1244. 力扣排行榜

    地址 https://www.acwing.com/solution/LeetCode/content/5765/ 题目描述新一轮的「力扣杯」编程大赛即将启动,为了动态显示参赛者的得分数据,需要设计一 ...

  9. MYSQL高可用集群架构-MHA架构

    1  MHA简介:MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司 ...

  10. docker修改系统时间总结

    最近弄docker烦躁的一笔,时区问题踩了不少坑,为了以后再遇到类似问题再花时间查资料,特记录一下... Ubuntu: echo "Asia/Shanghai" > /et ...