vue.js 01 模板语法

文章目录

vue插值
vue指令

vue插值

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app" ><h3>插值</h3><p>{{ message }}</p>v-model 指令实现表单输入和应用状态之间的双向绑定：<input v-model="message"><br/>用 v-on 指令添加一个事件监听器：<button v-on:click="reverseMessage">反转消息</button><hr/>文本：<span v-once>使用了v-noce指令，将不会改变: {{ msg }}</span><hr/>原始HTML：<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p><hr/>Attribute：<div v-bind:id="dynamicId"></div><button v-bind:disabled="isButtonDisabled">Button</button><hr/>使用JavaScript表达式：{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}</div><script>var vm = new Vue({el: '#app',data: {message: 'Hello Vue2!',msg: "hi vue",rawHtml: '<span style="color:red">This should be red.</span>',dynamicId: 'dId',isButtonDisabled: true, number: 5,ok: true,},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}});vm.msg = "hi......";</script></body>
</html>

效果：

vue指令

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app" ><h3>指令</h3><p v-if="seen">现在看到我了</p><a v-bind:href="url">...</a><hr/><a :href="url">v-bind缩写</a><hr/><a v-on:click="doSomething">{{message}}</a><hr/><a @click="doSomething">{{message}}v-on缩写</a></div><script>var vm = new Vue({el: '#app',data: {message: 'hello Vue',seen: true,url: 'https://www.baidu.com',},methods: {doSomething: function(){this.message = this.message.split('').reverse().join('')}}       });</script></body>
</html>

效果：

vue.js 01 模板语法相关推荐

Vue 第一天:模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
【猿说VUE】初试模板语法，开启VUE编码之旅
模板语法官网描述: Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的 ...
VUE中的模板语法以及过滤器和双向数据绑定
目录: 1. 模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令 1.2.1 核心指令 1.2.1.1 v-if |v-else-if| ...
1.vue简介以及模板语法---vue教程
1. vue简介 vue的组件化后缀名为.vue的文件是vue.js特有文件格式,表示一个vue组件 ,即单页式组件,可承载视图模板-,"样式定义"- 2.vue扩展插件 vue ...
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
关于使用vue.js的模板渲染时出现一瞬间的设置的模板的解决方案
本人在使用vue的时候,偶然发现多次刷新或者网络加载缓慢的时候,会一瞬间出现设置的模板.本人有点强迫症,就想把这问题解决了,试了隐藏掉模板代码. 说干就干,我就讲模板那块给用css隐藏了,可是结果悲剧 ...
（6）vue.js基础语法—插值表达式
一.vscode插件介绍在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击 ...
前端清单之Vue.js篇
2019独角兽企业重金招聘Python工程师标准>>> 教程实践基于 Vue 与 DeepStream 构建实时 CRUD 应用:Vue 是专注于 JavaScript UI 的渐 ...
Vue.js 模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...

vue.js 01 模板语法

文章目录

vue插值

vue指令

vue.js 01 模板语法相关推荐

最新文章

热门文章