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. php中文乱码原因和维修方法

    一．首先是PHP网页的编码 1.如果欲使用gb2312编码,那么php要输出头:header(“Content-Type: text/html; charset=gb2312”),静态页面添加,所有文 ...

  2. 记一次Ubuntu19无法安装docker源

    按照各大网站以及个人习惯我会使用下面这种方法添加Docker源: root@ubuntu:~# sudo add-apt-repository "deb [arch=amd64] https ...

  3. SpringBoot的启动流程分析(2)

    我们来分析SpringApplication启动流程中的run()方法,代码如下 public ConfigurableApplicationContext run(String... args) { ...

  4. C# 模拟Windows键盘事件

    发送键盘消息 [DllImport("user32.dll", EntryPoint = "keybd_event", SetLastError = true) ...

  5. JS基础语法---作用域

    作用域:使用范围 全局变量: 声明的变量是使用var声明的, 那么这个变量就是全局变量 全局变量可以在页面的任何位置使用 除了函数以外, 其他的任何位置定义的变量都是全局变量 局部变量:在函数内部定义 ...

  6. 剑指offer 25：二叉树中和为某一值的路径

    题目描述 输入一颗二叉树的根节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大 ...

  7. Consul作为配置中心，配置Asp.Net Core应用程序

    前言 最近项目逐步转向基于.Net Core,目前dotnet core 虽然已出3.0了但还没有特别成熟的框架,要实现微服务,必须要解决配置中心的问题 .不管是不是微服务,节点多了配置文件一个个更改 ...

  8. bay——安装_Oracle 12C-单实例-Centos7.txt

    安装Oracle12C 总结笔记 IP:10.20.4.214 ---------------------------------------------用户和密码: root/bayaimbayai ...

  9. Linux-3.14.12内存管理笔记【建立内核页表（3）

    前面已经分析了内核页表的准备工作以及内核低端内存页表的建立,接着回到init_mem_mapping()中,低端内存页表建立后紧随着还有一个函数early_ioremap_page_table_ran ...

  10. 线性代数笔记24——微分方程和exp(At)

    原文:https://mp.weixin.qq.com/s/COpYKxQDMhqJRuMK2raMKQ 微分方程指含有未知函数及其导数的关系式,解微分方程就是找出未知函数.未知函数是一元函数的,叫常 ...