这是暑假学习前端的第一天，从今天开始会发一些文章记录vue的学习笔记
今天是2022年6月18日,是我学习vue的第一天
第一个vue代码
<body>
<div id="root">
<h1>hello,{{name}}</h1>
</div>
<script>
// Vue.config.productionTip = false;
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: '我想giao啊'
}
})
</script>
</body>
vue流程
1. 引入Vue.js
2. 创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
3. 双向数据绑定 : v-model
4. 显示数据 : {{xxx}}
5. 理解vue的mvvm实现
1 模板的理解
- 动态的 html 页面
- 包含了一些 JS 语法代码 a. 双大括号表达式 b. 指令(以 v-开头的自定义标签属性)
2双大括号表达式
- 语法: {{exp}}
- 功能:向页面输出数据
- 可以调用对象的方法
3 指令一: 强制数据绑定
-
功能: 指定变化的属性值
-
完整写法: v-bind:xxx='yyy' //yyy 会作为表达式解析执行
-
简洁写法: :xxx='yyy 4 指令二: 绑定事件监听
-
功能: 绑定指定事件名的回调函数
-
完整写法: v-on:keyup='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'
- 简洁写法: @keyup='xxx'
@keyup.enter='xxx
<body>
<div id="app">
<h2>1. 双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<h2>2. 指令一: 强制数据绑定</h2>
<a href="url">访问指定站点</a><br>
<!--不能使用--> <a v-bind:href="url">访问指定站点 2</a><br>
<a :href="url">访问指定站点 3</a><br>
<h2>3. 指令二: 绑定事件监听</h2> <button v-on:click="handleClick">点我</button>
<button @click="handleClick">点我 2</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript"> new Vue({
el: '#app',
data: {// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问
msg: 'NBA I Love This Game!',
url: 'http://www.baidu.com'
},
methods: {
handleClick() {
alert('处理点击')
}
}
}) </script>
</body>
