一、属性
（1）el：挂载点
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>总结步骤：
-
引入vue.js
-
在body中必须有一个挂载点
-
new Vue，挂载到挂载点上
（2）data：vm数据属性
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>（3）methods：方法定义属性
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>（4）computed：计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
<script>（5）watch：监听属性
<body>
<div id="app">
<input type="text" v-model="message">
<h2>状态：{{ state }}</h2>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'Hello',
state: '【未修改】'
},
watch: {//监听属性
// 绑定监听数据
message: function (e){
// 当数据修改时做出响应(处理函数)
this.state = '【已修改😀】'
// ...
}
}
})
</script>（6）components：配置属性
<template>
<div>
<MyComponent title="Hello" content="World"></MyComponent>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>二、指令
（1）v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
（2）v-if，v-else
该指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
（3）v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样
<h1 v-show="ok">Hello!</h1>
（4）v-for
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>（4）v-on
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
</script>（4）v-model
V-model只不过是一个语法糖而已,真正的实现靠的还是
v-bind:绑定响应式数据
触发oninput 事件并传递数据
<input v-model="val">
<!-- 基本等价于，因为内部还有一些其他的处理 -->
$event是事件对象，$event.target.value表示input框中的输入值
<input :value="val" @input="val = $event.target.value">
（5）ref
给组件起名字，相当于 id 标记，通过：this.$refs.名字 获取给Dom元素
<input type='text' ref='userInfo' /> <!--相当于给input框取个名字，相当于id-->
this.$refs.userInfo.value
this.$refs.changeColor.style.color='red'
三、组件之间通信
（1）父传子
父组件： <子组件 变量='内容' :属性='变量'></子组件>
子组件： props:['变量','属性']
<Son :num="count" ></Son>
<p>接受父组件数据：{{ num }}</p>
export default {
props:['num']}
（2）子传父
<Son @getData="getData" @changeNum="changeNum"></Son>
getData(val){
console.log('子组件传递的数据val',val);
this.num = val
},
changeNum(val){
// this.count =9999;
this.count =val;
}
//发送数据给父组件
send(){
//语法
// this.$emit('自定义事件名称','参数变量')
this.$emit('getData',this.count)
},changeNum(){
//通知父组件
this.$emit('changeNum',999)}
