Vue是什么
是一套用于构建用户界面的渐进式框架, 被设计为可以自底向上逐层应用,核心库只关注视图层，易于上手
一、声明式渲染 指令学习
1、 {{ }}
传值
<div id="counter">
Counter: {{ counter }}
</div>
2、 v-bind
绑定元素的 attribute
<span v-bind:title="message">
hello ,word
</span>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>
3、 v-on
添加事件监听器:
<button v-on:click="reverseMessage">点击</button>
// 含有修饰符的用法
// 对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>
4、v-model
表单输入和应用状态之间的双向绑定:
<div id="two-way-binding">
<p>{{ message }}</p>
<input v-model="message" />
</div>
5、v-if
控制切换一个元素是否显示
<span v-if="seen">现在你看到我了</span>
5、v-for
绑定数组的数据渲染一个项目列表
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
6、v-once
一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>
7、v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用
v-html指令
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
js页面
const EventHandling = {
data() {
return {
message: 'Hello Vue.js!',
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling')
二、组件学习
- 定义组件
const TodoItem = {
props: ['todo'], // 组件接收的参数
template: `<li>{{ todo.text }}</li>` // 组件具体内容
}
const TodoList = {
data() {
return {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
},
components: {
TodoItem // 组件名称
}
}
const app = Vue.createApp(TodoList)
app.mount('#todo-list-app')
- 使用组件
<div id="todo-list-app">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList" // 组件内容需要循环
v-bind:todo="item" // 传参数给组件
v-bind:key="item.id" // 循环内的key值
></todo-item>
</ol>
</div>
三、生命周期学习
image.png
四、计算属性学习
<div id="computed-basics">
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</div>
data() {},
computed: {
// 计算属性的 getter
publishedBooksMessage() {
// `this` 指向 vm 实例
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
五、监听
<input v-model="question" />
data() {
return {
question: '',
answer: 'Questions usually contain a question mark. ;-)'
}
},
watch: {
// 每当 question 发生变化时，该函数将会执行
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = 'Thinking...'
axios
.get('https://yesno.wtf/api')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = 'Error! Could not reach the API. ' + error
})
}
}
