nodejs（3）：前段框架 vuejs2 学习

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/80191521

1，关于vuejs

现在流行的框架有几个 react angular 对比下。还是觉得找个容易的学习好。
vue 算是后起之秀。吸收了人家的优点。vue不是使用typescripe编写的。学习门槛低了很多。
像好多会jquery的可以很容易入手。非常好。
vue 卖瓜地址：
https://cn.vuejs.org/v2/guide/comparison.html

2，学习视频

搜索了下，找了个台湾的哥们讲的视频：
http://v.youku.com/v_show/id_XMTUwODcwODc0OA==.html
vue.js 002讲解起步
从第二集看就行。
我总结了下大概讲了4个例子

3，button事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <h1>button事件</h1>
    <div id="app">
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="foo = 'new foo'">Change it</button>
    </div>
</body>
</html>
<script>
    new Vue({
      el: '#app',
      data: {foo:'old foo'}
    })
</script>

4，循环数据li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
    <h1>循环数据li</h1>
    <div id="app">
        <p></p>
        <ul>
            <li v-for="user in users">
                {{ user.name }} , {{ user.sex }}
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
      el: '#app',
      data: {
                users:[
                    {name:"zhangsan1",sex:1},
                    {name:"zhangsan2",sex:0},
                    {name:"zhangsan3",sex:0},
                ]
            }
    })
</script>

5，反转字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
    <h1>反转字符串</h1>
    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reversMessage">Reverse</button>
    </div>
</body>
</html>
<script>
    new Vue({
      el: '#app',
      data: {message:"hello vue.js !"},
      methods:{
            reversMessage: function(){
                console.log(this.message);
                this.message = this.message.split("").reverse().join("");
            }
      }
    })
</script>

6，综合展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
    <h1>综合展示</h1>
    <div id="app">
        <p>{{ message }}</p>
        <input v-model="message" v-on:keyup.enter="addMessage">
        <ul>
            <li v-for="(item,index) in messageList">
                <span>{{ item.text }} </span> <button v-on:click="removeMessage(index)">X</button>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
      el: '#app',
      data: {
            message:"add message vue.js !",
            messageList:[]
      },
      methods:{
            addMessage: function(){
                var text = this.message.trim()
                if (text) {
                    this.messageList.push({text:text})
                    this.message = ""
                }
            },
            removeMessage: function(index){
                console.log(index)
                this.messageList.splice(index,1)
            }
      }
    })
</script>

通过输入框输入，并且按id删除。
这个地方 v-for=”(item,index) in messageList” 来活动 index，视频中的 $index 是有问题的。因为是vue2升级了。不支持$ index 了。

7，总结

开始学习了vue2的一点点东西，不用使用ES，直接使用js就行。
在浏览器里面引入一个script 就行。学习起来比较方便。
暂时理解概念，没有使用node npm 混合开发。
使用vue 做后台系统开发，慢慢的也要跟上时代，jquery 也很好用，但是不是未来了。
不知道谁还记得 portotype，后来被 jquery 取代了，下一个就是vue了。
一个技术在一定时期的时候是流行起来的，后来慢慢的就没落了，会有新的技术啊，
架构出现，也要跟上时代脚步。

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/80191521