(尚003).Vue_模板语法
2023-09-11 14:14:08 时间
1.双大括号表达式
2.指令一:强制数据绑定
3.指令二;绑定事件监听
test003.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.模板的理解:
动态的html页面
包含了一些js语法代码
双大括号表达式
指令(以v-开头的自定义标签属性)
2.双大括号表达式
语法:{{exp}}
功能:想页面输出数据
可以调用对象的方法
-->
<div id="app">
<h2>1.双大括号表达式</h2>
<p>{{msg}}</p>
<!--全部输出为大写,为纯手写js-->
<p>{{msg.toUpperCase()}}</p>
<!--把文本尽量理解成一个标签-->
<p v-html="msg"></p>
<!--给标签体添加一个文本-->
<p v-text="msg"></p>
<h2>指令一:强制数据绑定</h2>
<!--直接这样写会理解成是文本-->
<img src="imgUrl">
<!--强制绑定,把imgUrl这个js语法,变成一个表达式,变成表达式的话要去data里面去读取对应的值-->
<img v-bind:src="imgUrl">
<!--简介语法v-bind可以省略-->
<img :src="imgUrl">
<h2>指令二:绑定事件监听</h2>
<button v-on:click="test">test1</button>
<!--简洁语法v-on可以省略,@+事件名=回调函数-->
<button @click="test">test1</button>
<!--想传参数随意'abc'或者msg-->
<button @click="test2(msg)">test1</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
msg:'<a href="http://www.baidu.com">I will back </a>',
imgUrl:'https://cn.vuejs.org/images/logo.png'
},
<!--指令二:绑定事件监听-->
methods:{
test(){
alert('hehe!!')
},
<!--content为形参-->
test2(content){
<!--弹出内容-->
alert(content)
}
}
})
</script>
</body>
</html>
2.页面访问截图
厉害了!!!
相关文章
- Vue笔记:vue-router
- 一套Vue的单页模板:N3-admin
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue框架-基础1-vue包引入,指令,模板语言
- [Vue] Get up and running with vue-router
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- 纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- vue的手机端框架mint-ui头部header组件实现返回到上一个浏览页面
- vscode自定义vue模板代码
- Vue如何动态配置img标签的图片源src
- 143: vue+openlayers 做蒙版过滤处理,实现剪切、遮罩效果
- 018:vue+openlayers 禁用原有zoom控件,自定义地图放大缩小
- 【三十天精通 Vue 3】 第四天 Vue 3的模板语法详解
- Vue:第一个vue-cli项目