Vue入门初体验

2024年2月11日 95次阅读 来源: luckyw

Vue可以说是现在最火的MVVM前端UI框架了吧，整体性能优于React，比Angular也更轻量，具体可参考官网对比其他框架
官方文档: https://cn.vuejs.org/v2/api/

Hello World

首先我们开始从学每门语言的hello world入门Vue吧
html代码，同angular一样，采用双大括号的形式实现数据绑定:

<div id="app">
  {{ message }}
</div>

js代码，通过el获取到html的节点，向节点中插入data里的message的值:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello VueJs'
  }
})

运行结果:

Hello VueJs

注:el指明了创建的Vue实例对象的作用域，data则是用于存储Vue实例的数据对象

双向数据绑定

双向数据绑定就是用表单控件的v-model指令实现通过表单里的内容改变，来让data里的数据改变，最后更新到页面上

<input v-model="msg">
<p>{{ msg }}</p>

渲染列表

v-for指令根据一组数组的选项列表进行渲染，这个很像js里的for in循环，in前面是自己定义的局部变量，in后面是要遍历的数组

<ul id="list">
    <li v-for="item in items">
        {{item}}
    </li>
</ul>
<script>
var vm = new Vue({
    el:"#list",
    data:{
        items:["a","b","c"]
    }
})
</script>

事件监听

使用v-on指令监控对应的事件，比如:

<div id="app">
    <p>{{msg}}</p>
    <button v-on:click="reverse">clickMe</button>
    <button @click="reverse">clickMe</button>    //简写形式
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        msg:"hello world"
    },
    methods: {
        reverse: function() {
            this.msg = this.msg.split("").reverse().join("")
        }
    }
})
</script>

当点击按钮时，data里的msg的字符串就会反转，再点击之后就会重新变回来
注:methods里的方法可通过创建的Vue实例对象调用

TodoList

<div id="app">
    <input v-model="newTodo" v-on:keyup.enter="addTodo">
    <ul>
        <li v-for="item,index in lists">
            <input type="checkbox" :checked="item.state">
            <span>{{ item.text }}</span>
            <button v-on:click="removeTodo(index)">X</button>
        </li>
    </ul>
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        newTodo: "",
        lists: []
    },
    methods: {
        addTodo: function() {
            var todo = this.newTodo.trim();
            if (todo) {
                this.lists.push({
                    text: todo,
                    state: false
                });
                this.newTodo = "";
            }
        },
        removeTodo: function(index) {
            this.lists.splice(index, 1)
        }
    }
})
</script>

在html代码中用到了v-on:keyup.enter，这句代码意思是监听回车按钮敲击事件,如果敲击回车则执行后面的方法，下面的index是取得当前项的索引值传递到removeTodo方法中清除指定的项目
addTodo方法是将输入框输入的内容两边去掉空格，然后判断是否为空，如果不为空将这个字符串放到list数组里，并且清空输入框

    原文作者：luckyw
    原文地址: https://segmentfault.com/a/1190000008896118
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞