day01 Vue ElementUI Axios 前后端案例之Vue( 六 ) _绑定

vs
我们可以使用来替代，效果上两个都是一样的，但是是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用，在重新渲染的时候，函数总会重新调用执行。
计算属性的方法
属性默认只有，不过在需要时你也可以提供一个：
Hello Vue

{{computedMsg}}

src="http://www.kingceram.com/post/js/vue.js">>new Vue({el: '#app',data: {msg: 'Hello Vue'},computed: {// getter// computedMsg: function () {//return this.msg.toUpperCase();// }// 计算属性可以绑定到表单中computedMsg: {get: function () {// 获取值之前进行计算console.log('getter...');return this.msg.toUpperCase();},set: function (value) {// 设置值进行计算console.log(value)this.msg = value;}}}})

实例和生命周期
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

Hello Vue{{msg}}
src="http://www.kingceram.com/post/js/vue.js">>// 实例化let vm = new Vue({// el: '#app', //挂载data: {msg: 'Hello Vue'},beforeCreate: function () {console.log('beforeCreate...')},created:function() {// 获取后台的数据console.log('created...')},beforeMount: function() {console.log('beforeMount...')},mounted: function() {// 在这里 才能操纵domconsole.log('mounted...')},methods: {test: function () {alert()}}}).$mount('#app');// 手动挂载// vm.$mount('#app')//console.log(vm.msg);//console.log(vm.test());

补充知识点：
组件
什么是组件
组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、
的 th: 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式
来组织：
注意：在实际开发中，我们并不会用以下方式开发组件，以下方法只是为了让大家理解什么是组件。
使用 () 方法注册组件：
06-vue-.html


src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">>// 先注册组件Vue.component('my-component-li', {template: 'Hello li
'});// 再实例化 Vuevar vm = new Vue({el: '#app'});

说明：
()：注册组件
my--li：自定义组件的名字
：组件的模板
像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用 props 属性
使用 props 属性传递参数
了！
注意：默认规则下 props 属性里的值不能为大写：
06-vue--2.html


src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">>// 先注册组件Vue.component('my-component-li', {props: ['item'],template: 'Hello {{item}}
'});// 再实例化 Vuevar vm = new Vue({el: '#app',data: {items: ["张三", "李四", "王五"]}});

说明：
v-for=“item in items” ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件；
v-bind:item=“item” ：将遍历的 item 项绑定到组件中 props 定义的名为 item 属性上；

day01 Vue ElementUI Axios 前后端案例 之Vue( 六 )

day01 Vue ElementUI Axios 前后端案例之Vue( 六 )