vuejs的学习

第一章

html代码

<div id="app-1">
        {{ message }}
    </div>
    <div id="app-2">
        <span :title="message">
            <!--将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致-->
            鼠标悬停几秒钟查看此处动态绑定的提示信息!
        </span>
    </div>
    <div id="app-3">
        <p v-if="seen">现在你看到了</p>
        <p>在控制台输入　app3.seen = true>　你就会看到你想看到的</p>
    </div>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>
    <div id="app-5">
        <button @:click="reverseMessage">逆转消息</button>
    </div>
    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message" />
    </div>
    <div id="app-7">
        <ol>
            <!-- 现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。
            我们也需要为每个组件提供一个“key”。-->
        <p>{{message}}</p>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>

js代码

var app = new Vue({
    el: '#app-1',
    data: {
        message: 'hello Vue'
    }
})

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '页面加载于 ' + new Date().toLocaleString()
    }
})

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: false
    }
})

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: '学习 javascript' },
            { text: '学习 vue' },
            { text: '整个新项目' }
        ]
    }
})

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其它什么人吃的东西' }
        ]
    }
})

钩子函数的执行顺序

     beforeCreate() {
        console.log("创建前")
     },
     created() {
         console.log("创建后")
     },
     beforeMount() {
         console.log("渲染后")
     },
     mounted() {
         console.log("渲染后")
     },
     beforeUpdate() {
         console.log("更新后")
     },
     updated() {
         console.log("更新后")
     },
     beforeDestroy() {
         console.log("销毁后")
     },
     destroed() {
         console.log("销毁后")
     }

第二章

html代码

<!-- 第一节 -->
    <!-- <h3>普通文字</h3>
    <div id="app-1">
        <span>{{msg}}</span>
    </div>
    <h3>插入原始html</h3>
    <div id="app-2">
        <div>
            <span v-html="seen"></span>
        </div>
    </div>
    <h3>v-bind在html的属性上插值</h3>
    <div v-bind:id="dynamicId"></div>
    <h3>使用javascript表达式</h3>
    <ul v-bind:id="'list-'+id">
        <p>模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math 和Date。你不应该在模板表达式中试图访问用户定义的全局变量。</p>
        <li v-for "1 in 10">{{number + 1}}</li>
    </ul> -->
    <!-- 第二节 -->
    <!-- 计算属性 -->
    <!-- <div id="example">
        <p>原始内容: "{{ message }}"</p>
        <p>计算后内容: "{{ reversedMessage }}"</p>
    </div> -->

    <!-- <div id="app">
        <p>{{ site }}</p>
    </div> -->

    <!-- 监听器 -->
    <div id="computed_props">
        千米 :<input type="text" v-model="kilometers">
        米 :<input type="text" v-model="meters">
    </div>
    <p id="info"></p>
    <!-- <div id="app">
        <input v-model="msg" />
    </div> -->

js代码

var app = new Vue({
    el: '#app-1',
    data: {
        msg: 'hello Vue',
    }
});
var app = new Vue({
    el: '#app-2',
    data: {
        seen: '将内容以html标签的方式渲染，相当于原生的innerHtml属性',
    }
});


var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
    methods: {
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
})

var vm = new Vue({
    el: '#app',
    data: {
        name: 'Google',
        url: 'http://www.google.com'
    },
    computed: {
        site: {
            // getter
            get: function () {
                return this.name + ' ' + this.url
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.name = names[0]
                this.url = names[names.length - 1]
            }
        }
    }
})

var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers: 0,
        meters: 0
    },
    methods: {
    },
    computed: {
    },
    watch: {
        kilometers: function (val) {
            this.kilometers = val;
            this.meters = val * 1000;
        },
        meters: function (val) {
            this.kilometers = val / 1000;
            this.meters = val;
        }
    }
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})

var vm = new Vue({
    el: "#app",
    data: {
        msg: ''
    },
    watch: {
        msg: function (newValue, oldValue) {
            console.log(oldValue, newValue);
        }
    }
});