Vue3基础学习笔记（一）Vue语法初探
一、初识Vue
- 以“hello world”为例
<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>hello worldtitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
body>
<script>
Vue.createApp({
template:'hello world!!!'
}).mount('#root');
script>
知识点：
① Vue环境搭建：直接在html中引入以下链接
<script src="https://unpkg.com/vue@next">script>
② 创建一个Vue实例作用于id为root元素上（将ID为root的节点挂载到Vue上）
Vue.createApp({
}).mount('#root');
- Vue.createApp(）创建一个新的应用实例，参数为组件对象
- .mount() 挂载应用，应用实例在调用该方法后才会渲染出来，该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串
③在id为root元素中，使用模板作为展示的内容，也就是把模板放到id为root元素中
template:'<div>hello world!!!div>'
- 以“界面数字自增”为例
<body>
<div id="root">div>
body>
<script>
Vue.createApp({
data(){
return{
content:1
}
},
mounted() {
setInterval(()=>{
this.content +=1;
// 此处的this是this.$data
},1000)
},
template:'{{content}}'
}).mount('#root');
script>
知识点：
①插值语法：{{ }} 可以获取数据状态值，也可以写一些简单的表达式，如果对象里数据状态值改变，那么插值处的内容都会更新
②mounted()函数:页面加载完成后执行mounted()函数；
- 以“字符串反转”为例
<body>
<div id="root">div>
body>
<script>
Vue.createApp({
data(){
return{
content:'hello world'
}
},
methods: {
handleBtnClick(){
this.content = this.content.split('').reverse().join('');
}
},
template:`
{{content}}
`
}).mount('#root');
script>
知识点：
①V-on 绑定事件监听，可简写为@，经过v-on绑定的属性可以直接执行js代码,也可以去vue中methods中寻找函数执行
- 以“内容隐藏小功能”为例
<body>
<div id="root">div>
body>
<script>
Vue.createApp({
data(){
return{
show:true,
}
},
methods: {
handleBtnClick(){
this.show = !this.show;
}
},
template:`
hello world
`
}).mount('#root');
script>
知识点：
①v-if 条件判断，判断Dom元素是否显示，变量为布尔值，为true才渲染Dom
- 以“TodoList小功能”为例
<body>
<div id="root">div>
body>
<script>
Vue.createApp({
data(){
return{
inputValue:'',
list:[]
}
},
methods: {
handleAddItem(){
this.list.push(this.inputValue);
// 点击增加后，输入框中的内容为空
this.inputValue = '';
}
},
// 通过v-for循环list中的指令
// v-bind指令作用，标签上某个属性绑定内容时使用，而插值语法是标签内部绑定内容
template:`
- {{index}} {{item}}
`
}).mount('#root');
script>
①v-for 展示列表数据，遍历数组/对象/字符串
②v-bind 属性绑定，给标签上某个属性绑定内容
③v-model 双向数据绑定
- 以“TodoList小功能”为例，初探组件概念
<body>
<div id="root">div>
body>
<script>
// ①创建一个Vue的实例，实例的名字是app
const app = Vue.createApp({
data(){
return{
inputValue:'',
list:[]
}
},
methods: {
handleAddItem(){
this.list.push(this.inputValue);
// 点击增加后，输入框中的内容为空；
this.inputValue = ''
}
},
// ②外层调用todo-item组件时，在组件上挂载了content和index属性
template:`
`
});
// 注册todo-item组件
app.component('todo-item',{
//接受组件的content和index属性值
props:['content','index'],
template:`{{index}}--{{content}}`
});
// 创建实例，定义组件，最后将实例挂载在root节点下
app.mount('#root');
script>