vuejs （4）- 基础（1）_综合

1 条件指令

偶尔隐藏或者显示，用 if

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><div v-if="flag">Hello Mike</div>
</div><script>var app = new Vue({el:'#app',data:{flag:true}}) </script>
</body>
</html>

经常隐藏或者显示，用 show

<div id="app"><div v-show="flag">Hello Mike</div>
</div>

2 循环指令

<div id="app"><table border="1"><tr v-for="i in num"><td v-for="j in i">{{j}} * {{i}} = {{j * i}}</td></tr></table>
</div><script>var app = new Vue({el: '#app',data: {num: 9}}) </script>

在这里插入图片描述

3 处理用户输入

<div id="app"><div>{{message}}</div><button v-on:click="reverseMessage">翻转消息</button>
</div><script>var app = new Vue({el: '#app',data: {message:"Hello World!"},methods:{reverseMessage(){this.message = this.message.split('').reverse().join('');}}}) </script>

<div id="app"><div>{{message}}</div><!--input 和 message 绑定在一起 --><input type="text" v-model="message">
</div><script>var app = new Vue({el: '#app',data: {message:"Hello World!"}}) </script>

4 组件

<div id="app"><comp name="Vue"></comp>
</div><script>Vue.component('comp',{props:['name'],template:'<h1>Hello {{name}}</h1>'})var app = new Vue({el: '#app',data: {message:"Hello World!"}}) </script>

5 Vue 实例

<div id="app"></div><script>var data = {a:1,b:null}var app = new Vue({el: '#app',data: data})console.log(data.a == app.a);data.a = 99;console.log(app.a);app.a=100;console.log(data.a);console.log(">>>>>>>>>>>>>>>");console.log(app.$el == document.getElementById("app"));console.log(app.$data == data);</script>

在这里插入图片描述

6 计算属性

<div id="app"><div>{{reverseMessage}}</div>
</div><script>var app = new Vue({el: '#app',data: {message: 'Hello World!',copyMsg: null},methods:{},// 方法执行后会有缓存computed:{reverseMessage:{get(){return this.message.split('').reverse().join('');},set(newVal){this.copyMsg = newVal;}}}})</script>

7 侦听器

<div id="app"><div>{{fullName}}</div>
</div><script>var app = new Vue({el: '#app',data: {firstName : 'zhang',lastName : 'san',fullName : 'zhang san'},watch:{firstName(val){this.fullName = val +' ' + this.lastName;},lastName(val){this.fullName = this.firstName + ' ' + val;}}})</script>

在这里插入图片描述

更好的写法

<script>var app = new Vue({el: '#app',data: {firstName : 'zhang',lastName : 'san',},computed:{fullName(){return this.firstName + ' ' + this.lastName;}}})</script>

8 class 与 style 绑定

<div id="app"><div v-bind:class="{mydiv:flag}">{{msg}}</div>
</div><script>var app = new Vue({el: '#app',data: {msg:'hello Mike',flag:true}})</script><style>.mydiv{font-weight: bold;color:red;} </style>

在这里插入图片描述