Vue学习笔记01
一个刚学vue的小渣渣路过,仅为笔记,有任何错误的地方欢迎大家指正~~
一、引入vue.js模块
1)通过CDN脚本引入资源,缺点:每一次需要远程引入cdn地址,不方便
<script>http://cdn.jsdelivr.net/npm/vue/dist/vue.js</script>
2)通过node_modules。npm init - y
先触发项目,再通过npm i vue -S
引入vue包
<script src=./node_modules/vue/dist/vue.js></script>
- type="module"
<script type="module">
imoort moduleName from './node_modules/vue/'
</script>
二、创建hello world
<body>
<div id="app">{{msg}}</div>
<script>
//new Vue:相当于构造器
const app = new Vue({
//告诉vue,视图在哪里
el: "#app",
//存放响应式对象
data: {
msg: "hello world"
}
});
</script>
</body>
三、模板语法
01. 插值表达式{{}}
<div id="app">
//大胡子语法 可以 拼接字符串
//{{meg + "你好"}}------> hello world 你好
</div>
02.v-bind绑定数据和元素属性
<div id="app" v-bind:class="test">
//简写形式 :
<div id="app" :class="test"></div>
03.可以使用js表达式
04.Vue中的 $和_
$开头的属性:公有属性
_开头的属性:私有属性
<script>
const app = new Vue({
el: "#app",
data: {
msg: "hello world",
test:"test"
}
});
</script>
四、事件处理
01.v-on 注册事件
<button v-on:click="handleClick">点击</button>
//简写形式 @
<button @click="handleClick(1,$event)">点击</button>
methods: {
handleClick(type,e) {
console.log(type);
console.log(e);//e为默认参数:MouseEvent
}
}
02.修饰符
once:只生效一次
prevent:阻止表单提交
........
//once 触发一次事件
<button @click.once="count++">点击{{count}}</button>
五、计算属性
*依赖别的属性的属性
*可以依赖多个属性(多对一) :一个值可以对应多个属性
*可缓存 :如果 其中 所依赖的属性没有发生变更,则可直接打印输出;如果其中依赖的属性发生变化,则会重新计算
*一定要返回一个数据
//计算属性
// reverseMsg当做一个属性使用
<div id="app" :class="test">{{reverseMsg}}</div>
computed: {
reverseMsg() {
console.log("===========");
return this.msg.split('').reverse().join('');
}
}
计算属性与函数的区别
每次打印时,计算属性直接打印,函数则需要每次计算,从这一方面能够得知计算属性是有缓存特性的
//函数
<div id="app" :class="test">{{reverseHanlde()}}</div>
methods: {
reverseHanlde() {
console.log("reverse---Handle");
}
}
六、watch
一对多:根据一个属性可以触发多个属性
<div id="app">
{{count}} <br /> {{hello1}}-------{{hello2}}; <br />
<button @click="handleClick">点击</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
count: 0,
hello1: "",
hello2: "",
user:{
age:10,
name:"xiaoming"
}
},
methods: {
handleClick() {
this.count++;
}
},
watch: {
//一般用于异步请求数据
//想观察哪个量,则以谁命名
//==========1.函数的形式调用==========
count(newVal, oldVal){
console.log(newVal, oldVal);
//多个值去依赖一个属性
this.hello1 = "hello1" + newVal;
this.hello2 = "hello2" + newVal;
},
//==========2.以对象的形式调用==========
count: {
handler(val, oldVal) {
this.hello1 = "hello1" + val;
this.hello2 = "hello2" + val;
}
},
immediate:true, //立即调用
//==========3.观察对象为对象==========
user:{
handler(val,oldVal){
console.log("user");
console.log(val,oldVal);
},
},
deep:true, //深度观察对象值的变更
//==========只观察对象里指定的 key==========
"user.name":{
handler(val,oldVal){
console.log(val);
}
}
})
</script>
七、渲染
01.条件渲染
1) v-if 不满足要求 会干掉整个元素 ,适用于---懒加载
2)v-show 不满足要求 会通过css来 隐藏 display:none,用v-show 更多
<div id="app">
<div v-if="age===18">你好18岁</div>
<div v-else-if="age===19">你好19岁</div>
<div v-else>else</div>
<div v-show="age===18">18show</div>
</div>
02.列表渲染
for in [Array || Object]
- Object循环(user key index 必须按顺序)
<div id="app">
<ul>
<li v-for="(user,key,index) in users">
{{user}}---{{user.name}}----{{user.age}}--{{key}}---{{index}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
users: {
1: {
name: "xiaoming",
age: 20
},
2: {
name: "xiaohong",
age: 19
}
}
}
})
</script>
- Array中的循环
<div id="app">
<ul>
<li v-for="(user,index) in userList">
{{user}}---{{user.name}}---{{user.age}}---{{index}}
</li>
</ul>
</div>
//数据
userList: [
{
name: "xiaoming",
age: 20
},
{
name: "xiaohong",
age: 19
}
]
八、class & style
01.Array形式
<style>
.blue{
color: blue;
}
.fontSize{
font-size:50px;
}
</style>
<div id="app">
<div :class="classes">hahaha</div>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
count:0,
classes:["blue","fontSize"]
}
})
</script>
##当需要变更属性时,可以用计算属性,但是 data 和 computed 最好保留一个
##在Js中采用驼峰命名法(css:font-szie ------> js:fontSize)
computed:{
classes(){
return ["blue",this.count === 0 ?"fontSize":""];
}
}
02.Object形式
<div id="app">
<div :style="styleInfo">style</div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
count: 0,
styleInfo: {
color: "red",
fontSize: "60px"
}
}
})
</script>
九、表单输入绑定
v-model
<div id="app">
{{msg}} <input v-model="msg"/>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"hahaha"
}
})
</script>