<!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. python字符串内置方法

    网上已经有很多,自己操作一遍,加深印象. dir dir会返回一个内置方法与属性列表,用字符串'a,b,cdefg'测试一下 dir('a,b,cdefg') 得到一个列表 ['__add__', ' ...

  2. Docker run 命令

    docker run -d -p 8084:80 --name weather --restart always --link fme-postgis 192.168.1.220:5000/weath ...

  3. wc.exe

    1 /* 2 * 没能实现的功能:wc.exe -s递归处理目录下符合条件的文件 3 * wc.exe -x 显示图形界面 4 * 5 * 6 * 实现的功能: wc.exe -c显示文件的字符数. ...

  4. Python之file方法

        def fileno(self): #  文件描述符               def flush(self): #  刷新文件内部缓冲区             def isatty(se ...

  5. easyui datagrid 后台返回所有数据，前台分页

    function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'fu ...

  6. UBUNTU 16.04 安装AVD "An error occurred while running "android create avd

    安装库即可sudo apt-get install lib32stdc++6

  7. 机器学习笔记（三）Logistic回归模型

    Logistic回归模型 1. 模型简介: 线性回归往往并不能很好地解决分类问题,所以我们引出Logistic回归算法,算法的输出值或者说预测值一直介于0和1,虽然算法的名字有“回归”二字,但实际上L ...

  8. c语言头文件的认识

    c头文件的作用是什么,和.c文件是怎么联系的,该怎么样编写头文件呢?这些问题我一直没搞明白,在阅读uCOS-II(邵贝贝)“全局变量”部分有些疑惑,今天终于搞清楚了头文件的一些基础知识,特地分享一下. ...

  9. electron-vue初始桌面应用

    1.安装vue-cli脚手架 npm install -g vue-cli 2.创建项目:vue init simulatedgreg/electron-vue my-project 3.安装依赖 : ...

  10. RabbitMQ，为应对消息从发送到消费，各个环节消息丢失的解决方案

      1.发送方   为保证消息到达exchange,在这个过程中不丢失.  用事务或者发送方确认机制  见<RabbitMQ实战指南>4.8节 2.为保证消息不会因为到达exchange后 ...