Vue基础之Vue的模板语法
Vue基础之Vue的模板语法
数据绑定
01 数据绑定最常见的形式就是使用插值表达式（两个大括号!）【也就是小胡子语法！mustache】
<body>
<!-- Vue.js的应用可以分为两个重要的组成部分
一个是视图!
另一个是脚本!！ -->
<!-- 下面的就是视图！ -->
<div id="app">
<h1>{{message}}</h1>
</div>
<!-- 下面的就是脚本！ -->
<script type="text/javascript">
//
var app = new Vue({
el:'#app', // 这个就是你要操作的元素！
data: {
message: 'lvhang'
} // data用于保存数据！插值表达式！我们在视图中声明了那些变量， 就需要在data中注册同名的变量，并且对变量进行赋值！
})
</script>
</body>
02 通过便用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留这会影响到该节点上的其它数据绑定：
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'lvhang!'
}
})
app.message = 'lvchengcxin'
</script>
</body>
如何输出原始的HTML
v-html
<body>
<div id="app">
未加v-html属性！
<div id="">
<h2>{{message}}</h2>
</div>
加上v-html属性！
<div id="">
<h2 v-html="message"></h2>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '<h2 style="color: red;">lvchengxin</h2>'
}
})
</script>
</body>
使用Vue的语法为HTML绑定属性！
v-bind
<body>
<div id="app">
<!-- 这样就可以为某一个元素动态的绑定属性了!！ -->
<div id="" v-bind:class="dynamicId">
v-bind:某一个标签具有的属性="某一个变量的值"
栗子：
v-bind:class"dynamicId" 就是为当前的标签绑定一个class属性！
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'lvhang',
dynamicId: 'app2'
}
})
</script>
<style type="text/css">
/* 我们在为你上面绑定的元素添加一个样式! */
.app2 {
color: red;
}
</style>
</body>
在模板语法中使用JavaScript表达式
01 变量的算术运算！
<body>
<div id="app">
<p>{{number1 + 10}} 结果为11</p>
<p>{{ ok ? 'YES' : 'NO' }}
<br />三元表达式的判断! ok 是一个变量 类型是 布尔类型！要在data里面进行定义!
</p>
<p>进行复杂的函数运算！<br />b
在Vue的表达式中可以完全支持JavaScript的表达式!<br /> {{ message.split('').reverse().join('') }}</p>
<div v-bind:id="'list-' + id"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'lvhang',
dynamicId: 'app2',
number1: 1,
ok: 3 < 2,
message: 'lvhang'
}
})
</script>
</body>
指令
指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM
指令的参数!
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
指令的修饰符！
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<body>
<div id="app">
<!-- 指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式 -->
<!-- （v-for是例外情况，稍后我们再讨论），指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM，回顾我们在介绍中看到的例子： -->
<!-- 这里，v-if指令将根据表达式seen的值的真假来插入移除<p>元素. -->
<p v-if="seen">现在你看到我了</p>
<!-- 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute： -->
<a v-bind:href="url">...</a>
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
seen : false,
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
},
methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
console.log('click2......');
}
}
});
</script>
<style type="text/css">
</style>
</body>
Vue基础之Vue的模板语法的更多相关文章
- Vue基础（一）---- 模板语法
1.基本理解 Vue其实是一个渐进式JavaScript框架,封装好了一些方法,不再需要操作通过操作DOM,在相同的目标下能够更快的编写代码. 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构 ...
- Vue基础之Vue组件
Vue基础之Vue组件 // 组件是可以复用的Vue实例! // 可以把经常重复的功能封装为组件!
- vue简介、入门、模板语法
在菜鸟教程上面学习的vue.js.同时结合vue中文文档网站,便于自己记录. vueAPI网站:API 1. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框 ...
- Vue基础开发入门之简单语法知识梳理（思维导图详解）
基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)
- vue基础篇---vue组件《2》
定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- 前端框架VUE——数据绑定及模板语法
一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...
- vue - vue基础/vue核心内容（终结篇）
今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
随机推荐
- JavaScript之函数原型链完整版
我的上一篇文章有解释绅士原型及简单的原型链,在这里我将对原型链做完整讲述: // 函数的原型链: 把函数当对象(实例对象)来看 function Person(){} // 底层Function创建出 ...
- 【命令】at命令和cron命令
博文链接:https://www.cnblogs.com/l75790/articles/9191753.html
- matplotlib学习日记（二）----图表组成练习
''' 将前面的知识进行练习 plot,scatter,legend等 ''' import matplotlib.pyplot as plt import numpy as np from matp ...
- 7.mysql8.0版本MGR搭建
搭建MGR 1.配置文件 loose-group_replication_ip_whitelist = 192.168.124.0/24 loose-group_replication_start_o ...
- 为什么游戏公司的server不愿意微服务化?
背景介绍 笔者最近去面试了家游戏公司(有上市).我问他,公司有没有做微服务架构的打算及考量?他很惊讶的,我没听说过微服务耶,你可以解释一下吗? 我大概说了,方便测试,方便维护,方便升级,服务之间松耦合 ...
- VIM操作快捷键
i:插入光标前一个字符I:插入行首a:插入光标后一个字符A:插入行末o:向下新开一行,插入行首O:向上新开一行,插入行首M:光标移到中间行L:光标移动到屏幕最后一行行首G:移动到指定行{:按段移动,上 ...
- HystrixRequestContext实现Request级别的上下文
一.简介 在微服务架构中,我们会有这样的需求,A服务调用B服务,B服务调用C服务,ABC服务都需要用到当前用户上下文信息(userId.orgId等),那么如何实现呢? 方案一: 拦截器加上Threa ...
- 第八章节 BJROBOT hector 算法构建地图【ROS全开源阿克曼转向智能网联无人驾驶车】
1.把小车平放在地板上,用资料里的虚拟机,打开一个终端 ssh 过去主控端启动roslaunch znjrobot bringup.launch. 2.在虚拟机端打开一个终端,ssh 过去主控端启动r ...
- 【ASP.NET Core】Blazor 服务器端的 Base Path
提到 Blazor,没准就会有人问:选用 Server 端还是 WebAssembly(客户端)?其实这个不用纠结,老周个人的原则是:Server 端优先.理由很单纯:服务器端虽然消耗服务器上的资源, ...
- Dockerfile文件说明
文件说明 此文件用于docker镜像文件的制作 基本结构 Dockerfile文件由行命令组成,以#开头注释行 一般分为四部分,基础镜像信息.维护者信息.镜像操作指令和容器启动执行指令. 例如 #De ...