【学习打卡】第1天 【2022版】Vue3 系统入门与项目实战第一讲
课程名称： 2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节： Vue 语法初探
主讲老师： Dell
课程内容：
今天学习的内容包括：
对于不断推出的前端新框架，我们应该：不断探索摸索最新技术；
VScode可进行自定义操作
反转函数 : reverse()
绑定点击事件：v-on:click / @click
v-model 绑定数据
v-for 数组循环
几个基本和关键的Vue 模块，包括：
Vue.createAPP，通过Vue实例化一个 vueapp
data，用来传递数据到模版，或者其他函数中。函数中可以用 this + 变量名 调用这些数据
methods, 用来存放一些处理数据或者其他信息的函数。
template, 用来存放指定位置的 DOM 区域应该显示的内容。
课程收获：
1.3 心得：
vscode的一些技巧：
- 调界面的主题：文件->首选项->颜色主题
- 安装插件，实现代码提示 vue 3 snippets
- 设置console.log()的快捷方式
Vue.createApp({})：创建一个vue实例
mount：找到root节点
template：作为模板在root元素里展示
data: 函数
{{content}}: 变量，在data里定义
mounted: 页面加载后自动执行
this.content 是 this.$data.content 的简写
如何通过操作DOM实现同样的Counter:
const newDiv = document.createElement("div");
const textN = document.createTextNode("0");
const root = document.getElementById("root");
newDiv.appendChild(textN);
document.body.insertBefore(newDiv, root)
increment = function(){
firstC = document.body.firstElementChild
let iT = firstC.innerText
iT = parseInt(iT) + 1
firstC.textContent = iT
}
let update = setInterval(increment, 1000)
//clearInterval(update)
1.4 心得：
v-on表示绑定事件，v-on:click绑定点击事件
methods: { }，包含一系列定义的方法
注：methods中对data中的数据进行读取，必须使用this，比如
this.show = !this.show;否则就无法读取
v-if：显示和隐藏
v-if=“show” span标签的存在与否取决于show这个变量的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale"/>
<title>hello world</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// Vue.createApp({
// data() {
// return {
// content: 'hello world'
// }
// },
// mounted() {
// },
// methods: {
// handleBtnClick() {
// this.content = this.content.split('').reverse().join('')
// }
// },
// template: '<div >{{content}}<button v-on:click="handleBtnClick">点击翻转</button></div>'
// }).mount('#root')
Vue.createApp({
data() {
return {
show: true,
content: 'hello world'
}
},
mounted() {
},
methods: {
handleBtnClick() {
this.show = !this.show
}
},
template: '<div ><span v-show="show">{{content}}</span><button v-on:click="handleBtnClick">显示/隐藏</button></div>'
}).mount('#root')
</script>
</html>
1.5 心得：
vue 常用关键字，可用于 template 渲染：
- v-on: = “”`, 绑定一个页面事件，事件触发时执行相关函数
- v-for="(item, index) of list"`，便利 data 中 list 对象的元素和索引
- v-model=“inputValue”`, 和 data 中的 inputValue做双向绑定
for in是ES5标准，遍历key.
for of是ES6标准，遍历value.
<!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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data(){
return {
list:['hello','world','dell','lee'],
inutValue:''
}
},
methods:{
handleAddItem(){
this.list.push(this.inutValue)
}
},
template:'
<div>
<input v-model="inutValue"/>
<button v-on:click="handleAddItem">增加</button>
<ul>
<li v-for="(item,index) in list">{{item}}{{index}}</li>
</ul>
</div>'
}).mount('#root')
</script>
</html>
1.6 心得：
-bind:title, 用 v-bind 绑定某个标签属性
对于较大的项目，可以将某些较小的粒度拆分后形成组件，并进行注册。app.component( , {};
同时要注意注册组件的先后顺序。可以先创建一个 app，注册完所有组件后，再将 app 挂载到某个节点下
如果对某个标签用 v-bind 进行了属性的绑定，可以在组件中采用 props 来获取这些属性的值。可以用多个 v-bind 绑定多个属性。
如果有组件名为 “todo-list” 的，标签中可以直接写 ，vue能够识别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale"/>
<title>lesson 3</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleBtnClick () {
console.log(this.inputValue)
this.list.push('hello')
}
},
template: '<div><input v-model="inputValue"/><button v-on:click="handleBtnClick">点击增加</button><ul><li v-for="(item, index) of list">{{ item }} {{ index }} </li></ul></div>'
}).mount('#root')
</script>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
