vue学习入门篇 - 感受vue的魅力（附jQuery语法比较）

前言

对不起，我学习晚了。

前端迭代真是太快了，我所掌握的前端知识还停留在jQuery时期，这不正好就需要恶补一下前端新知识了，选择太多了，我决定直接从vue入手，把Nodejs、HTML5、CSS3、ES6都能带入进来学习，触类旁通。话不多说，正式进入vue学习入门第一课。

vue入门

页面源码直接在线打开：《vue框架学习入门demo》

1. 声明式渲染

<h3>入门</h3>
<div id="app">{{message}}</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    });
</script>

这是官方文档给出的第一个例子，看起来很简单吧，我们可以从这个例子发散一下思维，如果是jQuery怎么写呢。

<div id="jq_app"></div>
<script>
    var jqApp = {message: "Hello jQuery!"};
    jQuery('#jq_app').text(jqApp.message);
</script>

看起来渲染效果是一样的，但是vue版的渲染会随着 app.message 值的改变而自动更改渲染值，jQuery的这个渲染不会随着 jqApp.message 值的改变而更改渲染值，除非写出更复杂的代码才能达到同样效果。

有什么好处呢，好处就是如果我从接口请求了数据渲染这个值，当重新请求数据需要重新渲染时，vue版只需要执行 app.message="new value" 即可，不必去操作DOM修改值，vue会自动重新渲染。

单个值可能看不出优势，如果是下面这样的一整块需要渲染，那么就体现出优势了。

<div id="article">
    <h1 class="title">{{title}}</h1>
    <div><span class="author">{{author}}</span><span class="pub_time">{{publish_at}}</span></div>
    <div class="content">{{content}}</div>
</div>

jQuery来写上面这段渲染会很复杂，vue只需要维护几个字段就好了。

2. 绑定元素 attribute

<div id="app_2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>
<script>
    var app2 = new Vue({
        el: "#app_2",
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    });
</script>

这个例子学到了 v-bind:xxx="yyy" 这种语法，我把例子稍微延伸一下，应该也是可以运行吧。

<div id="app_2">
    <span v-bind:title="message" v-bind:style="styleInfo">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>
<script>
    var app2 = new Vue({
        el: "#app_2",
        data: {
            message: '页面加载于 ' + new Date().toLocaleString(),
            styleInfo: "color:red;"
        }
    });
</script>

内联样式属性 style 也可以绑定成功，说明理解得不错。

3. 条件

<div id="app_3">
    <p v-if="seen">现在你看到我了</p>
</div>
<script>
    var app3 = new Vue({
        el: '#app_3',
        data: {
            seen: true
        }
    });
</script>

上面是官方的例子，我在此基础上加了个切换按钮，代码如下。

<div id="app_3">
    <p><input type="button" class="button" value="显示/隐藏"></p>
    <p v-if="seen">现在你看到我了</p>
</div>
<script>
    var app3 = new Vue({
        el: '#app_3',
        data: {
            seen: true
        }
    });

    var ele3 = document.querySelector('#app_3');
    var btn3 = ele3.getElementsByClassName('button');
    btn3[0].addEventListener('click', function(){
        if (app3.seen) {
            app3.seen = false;
        } else {
            app3.seen = true;
        }
    });
</script>

这个绑定事件是我在不了解vue绑定事件怎么用的情况下，用原生js写的，vue里面有更好的封装，下面会有例子。

jQuery版估计得这么写：

<div id="jq_app_3">
    <p><input type="button" class="button" value="显示/隐藏(jq)"></p>
    <p class="seen-con">现在你看到我了</p>
</div>
<script>
    var jqApp3 = {seen: true};
    jQuery('#jq_app_3 > p > input[type=button]').on('click', function(){
        if (jqApp3.seen) {
            jQuery('#jq_app_3 .seen-con').hide();
            jqApp3.seen = false;
        } else {
            jQuery('#jq_app_3 .seen-con').show();
            jqApp3.seen = true;
        }
    });
</script>

4. 循环

<div id="app_4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script>
    var app4 = new Vue({
        el: "#app_4",
        data: {
            todos: [
                {text: "学习JavaScript"},
                {text: "学习Vue"},
                {text: "整个牛项目"}
            ]
        }
    });
</script>

上面是官方的例子，我在此基础上加了个数据新增功能，代码如下。

<div id="app_4">
    <p><input type="text" class="text"><input type="button" class="button" value="增加"></p>
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script>
    var app4 = new Vue({
        el: "#app_4",
        data: {
            todos: [
                {text: "学习JavaScript"},
                {text: "学习Vue"},
                {text: "整个牛项目"}
            ]
        }
    });

    var ele4 = document.querySelector('#app_4');
    var btn4 = ele4.getElementsByClassName('button');
    var txt4 = ele4.getElementsByClassName('text');

    btn4[0].addEventListener('click', function(){
        let con = txt4[0].value;
        if (con) {
            app4.todos.push({text: con});
            txt4[0].value = ''; // 清空文本框的值
            txt4[0].focus(); // 文本框继续获得输入焦点
        }
    });
</script>

这样就可以给这个列表添加项目了，比官方例子生动多了嘛。

至于jQuery版实现，算了，我不想写了...(PS:源码在demo里)

5. 绑定事件

<div id="app_5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
    var app5 = new Vue({
        el: "#app_5",
        data: {
            message: "hello Vue.js!"
        },
        methods: {
            reverseMessage: function() {
                this.message = this.message.split('').reverse().join('');
            }
        }
    });
</script>

原来vue绑定事件的语法是： v-on:event="eventMethod" ，缺失封装得挺好的哈。

6. 表单双向绑定

<div id="app_6">
    <p>{{ message }}</p>
    <input v-model="message" class="text">
</div>
<script>
    var app6 = new Vue({
        el: "#app_6",
        data: {
            message: "Hello Vue"
        }
    });
</script>

双向绑定也很简洁嘛，总算不用写jQuery那种事件监听了。

7. 组件

<div id="app_7">
    <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
</div>
<script>
    // 在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: '牛肉'},
            ]
        }
    });
</script>

唔，组件的例子，初次看还听复杂的，看懂以后稍微联想一下，就想到了这个就是模版渲染了，为了保持html兼容性，自定义了html标签嘛。看懂就好，先不深究，在实际开发中再去一一应证。

8. 侦听器

<div id="watch-example">
    <p>问一个是或否(yes/no)的问题: <input v-model="question"></p>
    <p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script>
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: '请先输入问题！'
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question: function(newQuestion, oldQuestion) {
                this.answer = '正在输入中...';
                this.debouncedGetAnswer();
            }
        },
        // Vue实例初始化以后会执行这个函数
        // _.debounce()是lodash库提供的延迟执行函数
        created: function() {
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
        },
        methods: {
            getAnswer: function() {
                if (this.question.indexOf('?') === -1) {
                    this.answer = '问题要以问号结尾嘛 :-)'
                    return
                }
                this.answer = '思考一下...';
                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 
                    });
            }
        }
    });
</script>

Vue 生命周期图示见官网图片点这里。

lodash 库的功能嘛，大概就是一些实用函数封装，不需要立马学习，使用时去lodash官网查一下，有时间也可以把其中的函数都看一遍，留个印象。

axios 库就是一个Ajax库了，和jQuery里的jQuery.ajax()类似，也算工具库，有时间可以封装了哪些东西。

总结

至此，对 vue 有了初步了解，学到了几个vue的语法。

v-bind:xxx="yyy" 绑定元素 attribute
v-if="xxx" 条件语句
v-for="item in list" 循环语句
v-on:xxx="yyy" 绑定事件
v-model="xxx" 表单元素双向绑定语法

这几种是模版引擎里常用的语法，vue实现得都很优雅，甚是喜欢。

--End--