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基础系列目录 < ...
随机推荐
- 记一次真实的webpack优化经历
前言 公司目前现有的一款产品是使用vue v2.0框架实现的,配套的打包工具为webpack v3.0.整个项目大概有80多个vue文件,也算不上什么大型项目. 只不过每次头疼的就是打包所耗费的时间平 ...
- Jquery Javascript 跳转页面传递参数以及获取url的参数
传递参数: window.location='editCourse.html?dataId='+dataId+''; 获取url中的参数(封装的方法): function getUrlParam ...
- Powerdesigner中表导出sql语句关于字段注释乱码的问题
问题说明 注释中的汉字都变成了?,应该是编码的问题. declare @CurrentUser sysname select @CurrentUser = user_name() execute sp ...
- 【命令】at命令和cron命令
博文链接:https://www.cnblogs.com/l75790/articles/9191753.html
- 检验实时3D像素流送平台好坏的七个标准！（上）
将交互式3D像素流送技术作为有价值的企业工具之后,就该寻找像素流送服务供应商了.问题在于交互式3D像素流送是一种新兴技术,因此很难知道要问供应商的正确问题.在开始使用之前,这里有7个问题,您应该从候选 ...
- 使用CDN后如何配置Apache使其记录访客真实IP
今天想看看哪些地区的人访问过我的网站,于是打开Apache网站响应日志,把访客IP复制到百度,发现搜到的全部都是我是用的CDN的节点IP,真实的访客IP并没有被记录. 如图所示,上面的103.45.7 ...
- pandas取前K大的数，sort_values()和nlargest()速度比较
排序量比较大时: 数据量比较小时: 所以结论就是: 数据量大时选用nlargest,数据量小时选用sort_values() 具体数据量怎么算大:10000条时两个方法的时间差不多,所以可以按1000 ...
- [leetcode]罗马数字和阿拉伯数字相互转换
罗马转阿拉伯 public int romanToInt(String s) { /* 从左到右依次根据哈希表进行加法 如果是"CM"900这种情况就要执行+M和-C处理 */ i ...
- win10 设置文件夹别名、修改文件夹图标、修改文件夹别名、英文目录和中文目录、设置文件夹中文名称、快捷访问显示设置中文
最近在设置文件夹的时候发现个有趣的事情: 系统路径 C:\Users\Administrator 内的文件夹不仅有图标还显示中文名称,但是打开路径的时候显示的却是英文,这就激发了我的探索欲,究竟是为 ...
- 前台生成JSON
方法一 :在后台需要转换String - json let param = new URLSearchParams(); param.append('username', this.username) ...