Vue入门初体验

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数组里,并且清空输入框

阅读 1.5k

luckyw
博客文章
677 声望
33 粉丝
0 条评论
677 声望
33 粉丝
宣传栏