Qui-Note官网Logo

嗖一下,答案就来了!

导航:Qui-Note/Vue3.0初学笔记

Vue3.0初学笔记

Vue3.0官方中文版开发文档:https://vue3js.cn/docs/zh/

前2天学习笔记:

学习篇

1.初识Vue 3.0 —— v-bind/on绑定数据及事件

2.初识Vue 3.0 —— {{ }} 响应式数据

3.初识Vue 3.0 —— v-model: 表单数据双向绑定

4.初识Vue 3.0 —— 条件if:控制元素显示隐藏

5.初识Vue 3.0 —— v-for: 列表循环数组/对象

6.初识Vue 3.0 —— component:组件创建

7.初识Vue 3.0 —— Vue.createApp: 应用实例创建

8.初识Vue 3.0 —— .count 组件实例 property

9.初识Vue 3.0 —— v-once : 一次性地插值

10.初识Vue 3.0 —— v-html: 插入html

11.初识Vue 3.0 —— attribute:属性值

12.初识Vue 3.0 —— js表达式

13.初识Vue 3.0 —— v-on:监听 DOM 事件

14.初识Vue 3.0 —— [attributeName] 动态参数

15.初识Vue 3.0 —— data:获取到data的值

16.初识Vue 3.0 —— 计算属性getter

17.初识Vue 3.0 —— $watch:侦听器

18.初识Vue 3.0 —— 动态class绑定

效果展示:

1.绑定数据及事件:

title:{{name}}

注意:v-on和v-bind的区别:v-on 指令添加一个事件监听器;v-bind 各类数据绑定指令
2.响应式数据:

age:{{age}}

注意:mounted声明周期——页面挂载时触发事件
3.表单数据双向绑定:
你输入了:{{inputModel}}
v-model绑定表单数据,别忘了挂载事件
4.条件if:控制元素显示隐藏
v-if条件判断,符合条件显示,否则不渲染
5.列表循环

a.遍历数组: v-for="item in lists" ,数组格式 items: [{ tag: '花菜' }, { tag: '菠菜' },{ tag: '大白菜' }]

  • {{item.tag}}
注意:v-for="item in lists" 直接绑定到循环元素上,小程序绑定数据是在父元素上,注意区分!
v-for 还支持一个可选的第二个参数,即当前项的索引。 v-for="(item, index) in items" 
v-for 也可以用 of 替代 in 作为分隔符。  v-for="item of items"

b.遍历对象:v-for="item in myo" ,对象格式: myo: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2020-03-22'}

  • {{ name }}: {{ value }}
注意:遍历对象是,v-for的参数可以有三个,依次为:值,键值,索引
6.组件创建
注意:1.组件的创建方式;2.props:['todo'], 设置参数注意格式;3.v-bind:todo="item",数据传递至组件参数内
7.应用实例创建
const app = Vue.createApp({ data(){ return{ count:4 } }})
8.组件实例 property
const vm = app.mount('#app')
注意,获取实例数据的方式:console.log(vm.count)   => 4
8.v-once一次性地插值,数据再发生变化就不再更新了:

我是一次性值:{{onceV}}

注意:v-once必须放到绑定元素的子元素上
9.v-html插入html

没有用v-html:{{ rhtml }}

用v-html:

10.v-bind绑定html的attribute属性值
用来绑定title,src,data-*...所有元素本身或自定义的值
11.使用JavaScript 表达式,仅支持三元或单个表达式
12.v-on监听 DOM 事件
v-on:click="doSomething"
12.动态参数

v-bind:[attributeName]="url"和v-on:[eventName]="doSomething",当“[]”里面的动态参数变化时,相当于绑定的属性值和事件发生了变化

去百度

注意:v-bind动态参数时[参数名]和后面的值url都必须是动态的数据,v-on也一样
13.data

组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 的形式存储在组件实例中。

data的num的值:{{num}}
通过vm = dd.mount('#dd')将声明实例,vm.$data.num和vm.num的方法都可以获取到data的值,也可以改变data的值(F12查看打印值)
14.计算属性getter

姓:

名:

你的名字:{{allName}}

计算属性默认只有一个getter,也可以新增setter,我的理解:直接通过参数当函数名,挂载时会立即执行计算属性
15.侦听器

count:{{nowtime}}

注意:tt.$watch('nowtime',function(n,o){/*n为新值,o为旧值*/})
16.Class绑定

{{isA?"点我变小":"点我变大"}}

注意:绑定class属性值是单括号{}——动态class名可以带引号,也可以不带,当然也可以是一个对象:包含多个class绑定样式,绑定事件不带括号,绑定文本值是双括号{{}}
17.Style内联样式绑定

我是24号红色字体 我是18号蓝色字体

注意:内联样式属性名可以用驼峰式,或短横线分割,也可以是一个对象/数组
18.条件渲染

v-if/v-else/v-else-if 

这里是H1

这里是H2

这里是H3

v-show

显示出来了

注意:v-if是真的渲染和销毁了;v-show只是css控制的显示隐藏,html还在