<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>safda</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body >
<!--双向绑定-通过v-model实现-->
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>

<!--构造器内容-->
<div id="vue_dat">
<h1>name：{{name}}</h1>
<h1>address：{{address}}</h1>
<h1>{{dowhat()}}</h1>
</div>

<!--模板语法-->

<!--插值-->

<!--文本-->
<div id="html">
<div v-html="html"></div>
</div>

<!--属性-->
<div id="vbindclass">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>

<!--表达式-->
<div id="expression">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
<!--指令-->
<div id="instruct">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
</div>

</body>

<!--模板语法-->

<!--插值-->

<!--指令是带有 v- 前缀的特殊属性指令用于在表达式的值改变时，将某些行为应用到 DOM 上-->
<script>
new Vue({
el: '#instruct',
data: {
seen: false,
ok: true
}
})
</script>
<!--表达式 给id赋值为list-1-->
<script>
new Vue({
el: '#expression',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
<!--属性使用 v-bind:class 指令用于改变样式：-->
<script type="text/javaScript">
new Vue({
el:"#vbindclass",
data:{
use:true
}
})
</script>

<!--文本使用 v-html 指令用于输出 html 代码：-->
<script type="text/javaScript">
new Vue({
el:"#html",
data:{
html:'Hellow World!'
}
})

</script>

<!--构造器内容-->
<script type="text/javaScript">
var date={
name:"金蝉子-陈袆-玄奘法师、齐天大圣-孙悟空（杜撰）、天蓬元帅-猪刚鬣（杜撰）、卷帘大将-沙悟净（杜撰）、西海三太子-敖杰（杜撰）",
address:"西天雷音寺（天竺国王舍城外的那烂陀寺）",
alexa:"10000"
}
var vm=new Vue({
el:"#vue_dat",
data:date,
methods:{
dowhat:function(){
return this.name+"去"+this.address+"取经";
}
}
})
// 它们引用相同的对象！
document.write(vm.name == date.name) // true
//设置属性会改变原始属性
vm.name="西天五人组"
document.write(date.name+"<br>")
//提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
//document.write(vm.$el === document.getElementById('vue_det')) // true
</script>

<!--双向绑定-->
<script type="text/javaScript">
new Vue({
el:"#app",
data:{
message:'Hellow World!'
}
})
</script>
</html>

vue--模板语法的更多相关文章

  1. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  2. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  3. Vue模板语法（一）

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  4. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. 初始Vue、Vue模板语法、数据绑定（2022/7/3）

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  6. (Vue)vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...

  7. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  8. Vue模板语法（二）

    Vue基础模板语法 二 1. 样式绑定 1.1 class绑定      使用方式:v-bind:class="expression"       expression的类型:字符 ...

  9. (32)Vue模板语法

    模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...

  10. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

随机推荐

  1. saltstack高效运维

    saltstack高效运维   salt介绍 saltstack是由thomas Hatch于2011年创建的一个开源项目,设计初衷是为了实现一个快速的远程执行系统. salt强大吗 系统管理员日常会 ...

  2. windows+nginx负载测试

    系统:windows2003nginx版本:1.7.3(官方推荐版本 #父节点 http upstream cluster_1{ ip_hash;#能较好地把同一个客户端的多次请求分配到同一台服务器处 ...

  3. 逐帧动画 两种实现方式 css和js

    第一种: css部分: <style> #foxtail{ background: url(../img/foxtail.png) 0 0 no-repeat; width: 156px; ...

  4. Python 元组tuple相关知识

    列表是有序的,列表元素可以被修改.元组是有序的,元组的一级元素不可被修改,但如果是元组的二级.三级元素并且刚好该元素是列表,则可以被修改.元组中的元组可进行for 循环,因此元组也是可迭代对象.字符串 ...

  5. bll

    string str = ConfigurationManager.AppSettings["DBName"].ToString(); public Studal ss() { A ...

  6. java第11周

    1.JPQL查询 JPQL全称Java Persistence Query Language 基于首次在EJB2.0中引入的EJB查询语言(EJB QL),Java持久化查询语言(JPQL)是一种可移 ...

  7. nova98 假区域链 骗人项目（vexx.pro的前身）

    首先,我是受害者. nova98前期是vexx.pro,前期推广送比特龙, 送3个,然后推广一个新人可以再拿到1.5个. 然后呢,现在就又推出一个新网站,nova98,把之前推广的人领到币全部清零,而 ...

  8. SpringBoot的学习【5.Spring Boot 的配置文件】

    1.配置文件的名称 Spring Boot 会将两种名称的文件默认为项目的全局配置文件.配置文件的名字是固定的. application.properties application.yml 2.配置 ...

  9. DNS学习笔记

    一.域名的层级结构 主机名.次级域名.顶级域名.根域名 # 即 host.sld.tld.root 比如,域名math.stackexchange.com显示为math.stackexchange.c ...

  10. header头 下载文件 参数详解

    header( header( header( header( header( header( header( header( header( //2 浏览器不会响应缓存 //1 Public指示响应 ...