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. 一文掌握 Lambda 表达式

    本文将介绍 Java 8 新增的 Lambda 表达式,包括 Lambda 表达式的常见用法以及方法引用的用法,并对 Lambda 表达式的原理进行分析,最后对 Lambda 表达式的优缺点进行一个总 ...

  2. docker打包python应用

    操作系统 : CentOS7.5.1804_x64 docker版本 : 18.06.3-ce 本文描述了怎么将简单的python应用打包成docker镜像的过程. 本文涉及文件目录结构如下: [ro ...

  3. ASP.NET Core 3.0 gRPC 配置使用HTTP

    前言 gRPC是基于http/2,是同时支持https和http协议的,我们在gRPC实际使用中,在内网通讯场景下,更多的是走http协议,达到更高的效率,下面介绍如何在 .NET Core 3.0 ...

  4. ASP.NET图片上传和截取

    一.介绍:图片的上传直接使用ajax就可以了,截取图片的话使用到Jcrop插件. 图片上传资料:https://www.jb51.net/article/87654.htm 截取图片插件:http:/ ...

  5. Go-数据类型以及变量,常量

    一.数据类型 1.字符串类型 string 2.数字类型 有符号整型: int: int 在32位机器上是int32 在64位机器是int64 int8: int8 表示数字范围是 正负2的7次方减1 ...

  6. web渗透测试

    信息收集 网络搜索 目录遍历:site:域名 intitle:index.of 配置文件泄露:site:域名 ext:xml | ext:conf | ext:cnf | ext:reg | ext: ...

  7. Cesium专栏-空间分析之地形等高线（附源码下载）

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  8. 推荐四个phpstorm酷炫实用插件 让你写代码的时候不在孤单!

    程序员写代码很孤独,每天只能和电脑屏幕交流,想要一个程序员鼓励师妹子,老板又不给配,如何让自己写代码的时候不再孤单呢?今天给大家分享的这四个插件,既实用又好玩,还能提高开发效率,这四个插件主要用到ph ...

  9. JS While

    JS While 只要指定条件为 true,循环就可以一直执行代码. while 循环 While 循环会在指定条件为真时循环执行代码块. 语法 while (条件) { 需要执行的代码 } whil ...

  10. OC深浅复制

    浅复制:指针的复制 深复制:内容的复制 主要有两个关键字  copy 和mutablecopy 对于基本类型 判断深浅方法 1.只要=右边从创建到赋值,至少包含一个NSMutable便会重新生成一个对 ...