目录初识Vue模板语法插值语法指令语法数据绑定单向绑定双向绑定el和data的两种写法eldataObject.defineProperty方法事件处理事件修饰符键盘事件定义命名(不
vue工作时,必须先创建Vue实例,且要传入一个配置对象
容器内的代码依然符合html规范,混入了一些特殊的Vue语法
<div id="root">
<h1>hello,{{name}}</h1>
</div>
// 创建一个实例
new Vue({
el:'#root',//el用于指定当前vue实例为那个容器使用,值通常为CSS选择器字符串
data:{ //data中用于存储数据,数据供el所指定的容器使用
name:'尚硅谷'
}
})
{{xxx}},常写在标签体内
<div id="root">
<!-- 指令语法 -->
<a :href="url.toUpperCase()" rel="external nofollow" ></a>//js表达式执行
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >百度</a>
<a :href="url" rel="external nofollow" rel="external nofollow" >简写,百度</a>
//使用v-bind指令后,href中的url即为js表达式,此处即为 Http://baidu.com
//v-bind指令可以简写为 :
</div>
<script type="text/javascript">
Vue.config.productionTip = false//防止在vue启动时产生提示
new Vue({
el:'#root',
data:{
name:'三万小',
url:'http://baidu.com',
}
})
</script>
v-bind:
:
v-model:
注:Vue管理的函数,不能写箭头函数,否则this指向不为Vue实例
let person = {
name:'张三',
sex:"男"
}
// Object.defineProperty(对象名,需添加的属性名,方法属性)
Object.defineProperty(person,'age',{
value:'18',//给person添加age:'18'
// enumerable:true,//控制属性是否可以枚举(遍历),默认值为false
// writable:true,//控制属性是否可以被修改,默认值为false
// configurable:true,//控制属性是否可以被删除,默认值为属性
}
getter函数实现了,读取age时实际读取的是number
setter函数实现了,修改age时,将age值给了number
?Vue中的数据代理?✨
? 1. 使用v-on:click='xxx’或者@click=‘xxx’绑定事件,其中xxx为事件名
? 2. 事件的回调需要配置在methods对象中,最终在vm上
? 3. methods中的函数不能用箭头函数,否则this就不是vm
? 4. 传参时 @click='xxx(参数)'的格式,其中event为@click=‘xxx($event)’
事件修饰符可以连写
即按钮只生效一次
常用按键名
Vue常用按键名:
特殊按键(修饰键)名
ctrl、alt、shift、meta的使用
设置只有其他键为y时才能触发事件,其他键都不可以
Vue.config.keyCodes.自定义键名 = 键名对应的键码
注:Vue未提供别名的按键,可直接使用原始按键名,但注意要写成kebab-case格式(如CapsLock写成caps-lock)
到此这篇关于Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解的文章就介绍到这了,更多相关Vue模板语法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解
本文链接: https://www.lsjlt.com/news/167363.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0