v-if v-show v-model
<template>
<div>
<!-- 引入css样式 -->
<h1 class="hellow">你好Vue</h1>
<!-- 条件判断 -->
<p :class="{ x1: count > 1 }">{{ count }}</p>
<!-- color2变量,给color颜色赋值 -->
<p :style="{ color: color2 }">{{ a }}</p>
<!-- 自定义初始化颜色 -->
<p style="color: skyblue">count2:{{ count ? "小白" : "小兰" }}</p>
<!-- 事件 -->
<button @click="onClick">加</button>
<!-- 判断 -->
<p v-if="count === 0">1111</p>
<p v-else-if="count === 1">2222</p>
<p v-else>3333</p>
<!-- 是否显示,v-show是开始就已经渲染了 -->
<p v-show="show">展示 v-show</p>
<ul>
<!-- 循环渲染 -->
<template v-for="(v, i) in arr">
<li :key="i">数组:{{ v }}</li>
</template>
</ul>
<ul>
<template v-for="(v, i) in obj">
<li :key="i">对象:{{ v }}</li>
</template>
</ul>
<!-- v-model 双向绑定 .trim是去掉空格 -->
<input type="text" v-model.trim="input" @input="onInput" />
<h1>input : {{ input }}</h1>
<input type="checkbox" id="jack" value="Jack" v-model="x1" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="x1" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="x1" />
<label for="mike">Mike</label>
{{ x1 }}
<button @click="onChange">改变input</button>
</div>
</template>
<script>
import "./index.less";
export default {
data() {
return {
count: 0,
a: 1,
color2: "blue",
show: true,
arr: ["1", "2", "3", "4"],
obj: {
username: "小红",
age: 14,
city: "哈尔滨",
},
input: "",
x1: [],
};
},
methods: {
onClick() {
this.count++;
},
onChange() {
this.input++;
},
onInput() {
console.log(this.input.length, "input");
},
},
};
</script>
父子组件传值
父组件:
<template>
<div>
<Child :obj="obj" :onClick="onClick" @xxx="onClick2" />
</div>
</template>
<script>
// css
import "./index.less";
// 子组件
import Child from "./Child";
export default {
data() {
return {
obj: {
user: "小花",
},
num: 25,
};
},
methods: {
onClick(res) {
console.log("res", res);
},
onClick2(res) {
console.log("child", res);
},
},
components: {
// 注册子组件
Child,
},
};
</script>
子组件:
<template>
<div>
<h1>对象:{{ obj }}</h1>
<button @click="onClick(ur)">向父组件传递参数</button>
<button @click="onClick2">emit传值</button>
</div>
</template>
<script>
// css
import "./index.less";
export default {
// 接收父组件传递的参数
props: ["obj", "onClick"],
data() {
return {
ur: "aaa",
};
},
// componentDidMound 页面元素渲染完成的钩子
mounted() {},
methods: {
onClick2() {
// this.$emit(key,参数)
this.$emit("xxx", {
age: 25,
});
},
},
};
</script>
watch监听,深度监听
<template>
<div>
<h1>{{ xxx }}</h1>
<h1>{{ obj.user }}</h1>
<button @click="onClick1">改变Num1</button>
<button @click="onClick2">改变Num2</button>
<button @click="onClick3">改变obj</button>
</div>
</template>
<script>
// css
import "./index.less";
export default {
data() {
return {
xxx: "",
num1: 0,
num2: 0,
obj: {
user: "小花",
},
};
},
methods: {
onClick1() {
this.num1++;
},
onClick2() {
this.num2++;
},
onClick3() {
this.obj.user = "小蓝";
},
},
// 监听
watch: {
// 监听num1,num1发生改变则调用
num1(newValue, preValue) {
console.log("num1", newValue, preValue);
console.log("num1", this.num1, this.num2);
this.xxx = `${this.num1}万 - ${this.num2}万`;
},
num2(newValue, preValue) {
console.log("num2", newValue, preValue);
this.xxx = `${this.num1}万 - ${this.num2}万`;
},
obj: {
handler(val, oldVal) {
// 前后值一样
console.log("val", val);
console.log("oldVal", oldVal);
},
// 深度监听
deep: true,
},
},
components: {},
};
</script>
computed计算属性,ref获取dom
<template>
<div>
<h1>num1:{{ num1 }}</h1>
<h1>num2:{{ num2 }}</h1>
<h1>obj:{{ obj }}</h1>
<h1>xxx:{{ xxx }}</h1>
<button @click="onClick1">改变num1</button>
<button @click="onClick2">改变num2</button>
<button @click="onClick3">改变obj</button>
<!-- xss 注入 防止通过注入死循环进攻页面-->
<div v-html="h1"></div>
<!-- 绑定ref 获取dom元素 -->
<div ref="d1">ref Dom</div>
<!-- 过滤器 -->
<div :xxx="x2()">{{ x1() }}</div>
<!-- 获取子组件Dom -->
<Child ref="a2" />
</div>
</template>
<script>
import Child from "./Child";
export default {
data() {
return {
num1: 0,
num2: 0,
obj: { user: "小花", age: 17 },
h1: "<h1>小字</h1>",
};
},
mounted() {
console.log("zzz", this.$refs);
// 打印子组件zzz方法
this.$refs.a2.zzz();
console.log("refs", this.$refs.d1);
},
methods: {
onClick1() {
this.num1++;
},
onClick2() {
this.num2++;
},
onClick3() {
this.obj.user = "小白";
},
x1() {
return { user: this.obj.user };
},
x2() {
return this.obj.user;
},
},
computed: {
xxx() {
// s首次渲染就会执行 会缓存元素,必须有return
return `${this.num1}万-${this.num2}万=${this.obj.user}`;
},
},
components: {
Child,
},
};
</script>