1、
mounted 当页面加载完自动执行的函数
setInterval 定时器方法
mounted() { //当页面加载完成自动执行的函数
setInterval(() => {
this.content += 1 //this.content 就是this.$data.content
},1000),
console.log('mounted')//自动执行，
},
2、v-
v-on ：绑定事件
v-on:click = ""
v-if：隐藏与显示
v-if="show"
v-for：遍历数组
v-for=""
<li v-for="(item,index) of list">{{item}} {{index}}</li>
v-model：双向绑定
v-model：输入框内容和value值进行双向绑定
<input v-model="inputValue"></input>
3、
v-bind ：标签属性跟值进行绑定
多个绑定，则需要写多个v-bind
<todolist v-for="(item,index) of list" v-bind:content="item" v-bind:indexItem="index" />
拆分vue组件：
先注册vue实例 ：const app = Vue.createApp({})
在拆分component组件
app.component( 'todolist',{
// data() {
// return {
// item:"hello dell"
// }
// },
//外部传参
props:["content","indexItem"],
template:'<li>{{indexItem}} -- {{content}}</li>'
});
props：进行组件传参定义；
一个组件写法跟一个跟vue最初实例方法是类似的，包含数据data，以及渲染的结构，逻辑。
最后挂载mount root上
app.mount('#root');
4、面向数据编程，数据模版关联起来，参考mvvm模式
createApp表示创建一个应用,存储在app变量中。
一个网页应用是由一个个组件组成的
//vm表示vue应用的根组件
const vm = app.mount('#root');
5、vue生命周期
生命周期函数：在某一时刻自动执行的函数
//在实例执行之前执行的函数
beforeCreate(){
console.log('beforeCreate')
},
//实例创建之后执行的函数
created() {
console.log('created')
},
//组件被渲染到页面之前执行的函数 【在模版被编译成函数之后】
beforeMount() {
console.log('beforeMount')
},
//组件被渲染完成之后执行的函数
mounted() {
console.log('mounted')
},
//当data中数据发生变化会执行
beforeUpdate(){
console.log('beforeUpdate')
},
//当data数据发生变化，同时页面完成更新时，才会执行
updated() {
console.log('updated')
},
//当vue应用失效时，自动执行的函数
beforeUnmount() {
console.log('beforeUnmount')
},
//当应用失效时，且dom完全销毁之后，自动执行的函数。
unmounted() {
console.log('unmounted')
},
当创建实例中有template，则把其当作模版；
如果没有，就把root结点下的dom当作模版来；
6、
title标签：鼠标点上去显示的title内容
template:'<div v-bind:title="message">hello world</div>'
v-html：可以展示一个html的字段样式
v-once：数据变化也会根据数据变化去重新做渲染
v-on:click = "" 等价于 @click = ""
v-bind:title = "" 可以简写为:title = ""
阻止按钮行为一：form添加click，click方法中写：e.preventDefault();
阻止行为方式二： 修饰符语法：@click.prevent="handleItemClick"
7、data数据 && 方法methods && 计算属性computer && watcher监听器
（1）methods 不仅可以在点击方法中用，也可以在插值表达式中用；
注意：当法：只要页面重新渲染，才会重新计算
（2）computer：计算属性：当计算属性依赖的内容发生变化，才会重新执行计算；
computered() {
return total = this.count * this.price
},
（3）watcher：监听某个值，发生变化进行函数调用；异步操作较方便
watch:{
price() {
//price价格变了，3秒钟后打印日志
setTimeout(() =>{
console.log('price change')
},3000
)
}
},
总结：
（1）coomputer和method都能实现的一个功能，建议使用computer，因为有缓存。
（2）computer和watcher都能实现的一个功能，建议使用compuuter，因为更简洁。
8、样式绑定
<!-- 1、通过字符串：直接加样式，上面scrpit标签加<style></style> 样式定义，下面模版直接加class="red"就好了。 -->
<!-- 2、可以通过对象：classObject:{red:true,green:false} ， -->
<!-- 3、可以通过数组:classArray:['red','green',{brow:flase}] -->
<!-- 4、子组件如果多个div，父组件样式会针对哪个子组件呢，可以通过在子组件中 class="$attrs.class" 来表示子组件用父组件的样式 -->
<!-- 5、行内也能直接加样式，<div style="color:yellow"></div> -->
<!-- 6、data中定义字符串或者定义对象来使用样式，推荐使用对象：
styleObject:{
color:'blue',
background:'red',
}
-->
9、条件渲染：v-if，v-show，v-else，v-if-else区别
<!-- 1、v-if控制div的显示隐藏，是通过控制dom上元素存在与否来控制的 -->
<!-- 2、v-show通过style样式来控制的，通过display：none来设置隐藏 -->
<!--
3、v-if，v-else用法：
<div v-if="conditionOne">if</div>
<div v-else>else</div>
-->
<!--
4、if-else-if用法：
<div v-if="conditionOne">if</div>
<div v-else-if="conditionTwo">elseif</div>
<div v-else>else</div>
-->
10、循环数组、循环对象、修改数组、修改对象内容
1、修改数组
（1）数组变更：使用数组的变更函数：push，pop等函数
eg：
<!-- 尽量给个key，提升性能，尽量复用 -->
<!-- push函数：增加元素 -->
<!-- pop函数：从下标大的往小的挨着删除 -->
<!-- shift函数：往开头删除内容 -->
<!-- unshift函数：从头开始新增元素 -->
<!-- rverse函数：取反 -->
<!-- splice函数：对一部分内容做变更 :list.splice(index,len,item) 数组下标，替换长度，替换的值，，，删除的话item为空就好了-->
<!-- sort函数：进行排序 -->
（2）替换数组
this.list = ["one",'two']
（3）直接更新数组内容
this.list[1] = 'hello'
2、修改对象
（1）直接添加对象内容
this.listobject.age = 100;
this.listobject.sex = 'male'
（2）循环对象遍历显示，筛选key 不为lastname的元素
<li>循环对象</li>
<div v-for="(value,key,index) in listobject">
<div v-if="key !== 'lastName'">{{value}} -- {{key}} -- {{index}}</div>
//此处不展示key为lastname的元素
</div>
v-for 和 v-if同时判断，v-for优先级会更高；
可以在div中嵌套一个div去写v-if，也可以用tmplate去替代外层div，
template代表一个占位符，不会进行渲染dom。
10、事件绑定 && 事件修饰符
事件绑定：可以mothods添加方法，也能!@click="表达式"
1、直接method 方法添加cunter+=1
2、button click中直接写表达式，不去添加方法
3、button click多个方法时，可以这样添加：@click="addAction(),addAction1()"
事件修饰符：
冒泡：从内到外
捕获：从外到内
事件修饰符：
1、 @click.stop ：表示停止向上冒泡事件 (不加的话，click事件会响应buttn事件，同时上层div有click事件也会响应)
2、 @click.self ：表示是不是当前div标签触发的事件，如果是自己dom标签才执行，子标签触发不执行的；
类似还有：@click.prevent 阻止事件默认行为， @click.capture 改变冒泡顺序 ，@click.once只执行一次， passive
11、其他修饰符
按键修饰符：
keydown:按键事件的绑定
1、<input @keydown="addAction" /> 随着键盘输入内容去执行方法
2、<input @keydown.enter="addAction" /> 按下enter 去执行方法
类似还有：tab，delete，esc,up,down,left,right,
鼠标修饰符：
left，right，middle
@click.left
精确修饰符：
exact：
例如：@click.ctrl 指的是按住control再点击会执行方法，
@click.ctrl.exact 指的是只有按住conntrol+点击，才会去执行方法
12、双向绑定：input，textarea，checkbox，radio
1、 input 表单项跟数据进行双向绑定，数据变化输入框也变了，输入框变化，数据也变了
2、textarea 跟input一样,v-model跟数据进行双向绑定。vue底层为其进行了双向绑定。
eg:<textarea v-model="message"/>
3、checkbox 多选框 :<input type="checkbox" v-model="message" />
true-value:设置true状态为某个字符串
false-value:设置false状态为某个字符串
eg:true-value="hello"
4、多个checkbox的话：可以在data中用数组去存储v-model，以保存多个checkbox的值。
同时需要设置checkbox的value值
<div>
{{message}}
jack <input type="checkbox" v-model="message" value="jack" />
dell <input type="checkbox" v-model="message" value="dell" />
lee <input type="checkbox" v-model="message" value="lee" />
</div>
5、radio：单选框，只能选择一个，初始值给个字符串就行
eg:jack <input type="checkbox" v-model="message" value="jack" />
6、select：下拉选择框，opotion是选项内容，v-model进行值绑定，默认值设置字符串。
multiple:select设置多选。
<select v-model="message">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
-----------------------------------------------------------
options:[
{text:"A",value:"AAAA"},
{text:"B",value:"BBBB"},
{text:"C",value:"CCCC"},
]
<div>
<select v-model="message">
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
<li>{{message}}</li>
</div>
多个选项存放在数组里，遍历去拿数据。
注：:value 【如果后面是表达式，需要加冒号，否则显示字符串内容】
13、其他修饰符
7、lazy修饰符：v-model.lazy="message" 取消焦点才去执行赋值
<input v-model.lazy="message" />
number修饰符：v-model.number="message" 将数值转化为number类型再去赋值
<input v-model.number="message" type="number"/>
trim修饰符：v-mdel.trim="message" 赋值前去掉空格,只是去除前后空格，字符串中间空格是不去除的；
<input v-model.trim="message" />
网友评论