1.模块语法

    <div id="app">
        <!-- mustache标签 -->
        <!-- v-text  v-html -->
        <p>{{message}}</p>
        <p v-text="message"></p>
        <p v-html="message"></p>
        <p>hello {{message}}</p>
        <!-- v-bind -->
        <div>
            <ul>
                <li v-for="i in 10" v-bind:id="'list'+i" v-text="i"></li>
            </ul>
        </div>
        <!-- disabled -->
        <button v-bind:disabled="foo">显示</button>
        <!-- 不显示dis属性 -->
        <button v-bind:disabled="foo1">显示</button>
        <!-- js表达式 -->
        <p>{{school}}</p>
        <!-- v-bind缩写  v-on缩写 -->
        <p :id="message"></p>
        <p @click="dl" v-text="message"></p>
        <p v-bind:class="cla"></p>
    </div>
 

<script>
    var school="hello";
    var app=new Vue({
        el:"#app",
        data:{
            cla:"hakgfkuwfh",
            message:"app",
            foo:true,
            foo1:false,
            school,// school=>school:school,
        },
        methods:{
            dl:function(){
                this.message=this.message.split("").reverse().join("");
            }
        }
    })
</script>

2.计算器和监听器

计算器里面的属性方法有缓存作用，比调用方法更加的快捷

监听器可以实时判断数据的变化更新

<div id="app">
        <p>{{message}}</p>
        <p>{{res}}</p>
        <input type="text" v-model="firstName">+<input type="text" v-model="lastName">={{fullName}}
        <p><input type="text" v-model="fullName"></p>
        <input type="text" v-model="message">
    </div>
    <div id="watch-example">
        <p>
            Ask a yes/no question:
            <input v-model="question">
        </p>
        <p>{{ answer }}</p>
    </div>

 var vu=new Vue({
        el:"#app",
        data:{
            message:"hello word",
            firstName:"",
            lastName:"",
        },
        computed:{
            res(){
                return this.message.split("").reverse().join("");
            },
            fullName:{
                get(){
                    return this.firstName+" "+this.lastName;
                },
                set(newv){
                    var newValue=newv.split(" ")
                    this.firstName=newValue[0]
                    this.lastName=newValue[1]
                    // return this.firstName+" "+this.lastName
                }
            }
        },
        watch:{
            message(newn,oldn){
                console.log(newn,oldn);
            }
        }
    })
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: 'I cannot give you an answer until you ask a question!'
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question: function (newQuestion, oldQuestion) {
            this.answer = 'Waiting for you to stop typing...'
            this.debouncedGetAnswer()
            }
        },
        created: function () {
            // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
            // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
            // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
            // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
            // 请参考：https://lodash.com/docs#debounce
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
        },
        methods: {
            getAnswer: function () {
            if (this.question.indexOf('?') === -1) {
                this.answer = 'Questions usually contain a question mark. ;-)'
                return
            }
            this.answer = 'Thinking...'
            var vm = this
            axios.get('https://yesno.wtf/api')
                .then(function (response) {
                vm.answer = _.capitalize(response.data.answer)
                })
                .catch(function (error) {
                vm.answer = 'Error! Could not reach the API. ' + error
                })
            }
        }
        })