<!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. Javase系列之面向对象（一）

    作为一个Java程序员,我们每天做的事情就是OOP(面向对象),可以说万物皆对象,Java是一门面向对象的程序语言,鉴于基本的面向对象知识也是一个较为庞杂的模块,所以博主我准备用多篇文章去介绍Java ...

  2. 实训任务03： 使用Eclipse创建MapReduce工程

    实训任务03: 使用Eclipse创建MapReduce工程 实训1: win7中使用Eclipse创建MapReduce工程 实训2:Centos 6.8系统中安装Eclipse 一.下载Eclip ...

  3. Spring MVC流程

    这是spring mvc框架结构图,图片是很早在网上撸过来的,具体在哪忘了…… 早期学习Springmvc 并没有具体了解过,只知道这样用很爽,最近了解下基本结构流程及组件所在…… 执行流程 Spri ...

  4. windows上传文件到linux云服务器上

    安装putty,将pscp.exe移到 C:\Windows\System32 目录下. 在cmd 中执行,pscp -l rot -pw [password] -ls [ip]:/opt 查看目录 ...

  5. linux 增加虚拟内存swap（使用文件）

    1.简介 如果你的服务器的总是报告内存不足,并且时常因为内存不足而引发服务被强制kill的话,在不增加物理内存的情况下,启用swap交换区作为虚拟内存是一个不错的选择. 为了测试一些功能我在阿里云购买 ...

  6. FCC-js算法题解题笔记

    题目链接:https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/intermediate-algorithm ...

  7. VS2010 配置与调试

    一.VS2010项目属性配置 使用VS调试程序,出现错误:"无法启动程序"***\**.exe".系统找不到指定的文件".网上找来解决办法, 也未能解决,但这些 ...

  8. C++入门程序作业3

    /* 输出n位数据的格雷码 The gray code is a binary numeral system where two successive values differ in only on ...

  9. SearchView监听关闭正确方案

    SearchView往往需要在关闭的时候清除筛选的数据后加载全部数据,但是oncloseListener在高版本的andorid是不起作用的 ,正确的做法应该是取得searchview中那个close ...

  10. java8-lambda常用语法示例

    常用语法示例: public static void main(String[] args) { List<OrderInfo> orderInfoList = Lists.newArra ...