第十一周周记
1.Vue本质
Vue的本质是将数据和内容展现的视图分开,即所谓的MV模式,代码可以分为三个板块:模型(Model),逻辑控制(*),视图(View),模型板块负责数据,视图板块负责样式,逻辑控制负责将视图和数据关联。这样的好处是,当需求发生变动时,只需要修改对应的板块。
2.Vue的快速起步
每个 Vue 应用都需要通过实例化 Vue 来实现:
var vm = new Vue({
// 选项
})
3.Vue的模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
按钮的事件可以使用 v-on 监听事件,并对用户的输入进行响应。
input 输入框中可以使用 v-model 指令来实现双向数据绑定。
4.文本插值
< div id=“app”>
< p>{{ message }}< /p >
< /div>
5.指令
指令是带有 v- 前缀的特殊属性,用于在表达式的值改变时,将某些行为应用到 DOM 上。
< div id=“app”>
< p v-if=“seen”>hello< /p>
< /div>
< script>
new Vue({
el: ‘#app’,
data: {
seen: true
}
})
< /script>
Vue.js Ajax(axios)
① GET 方法
new Vue({
el: ‘#app’,
data () {
return {
info: null
}
},
mounted () {
axios
.get(‘https://www.runoob.com/try/ajax/json_demo.json’)
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})
②POST 方法
new Vue({
el: ‘#app’,
data () {
return {
info: null
}
},
mounted () {
axios
.post(‘https://www.runoob.com/try/ajax/demo_axios_post.php’)
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})