Vuejs——（1）入门（单向绑定、双向绑定、列表渲染、响应函数）

迷南。 2022-07-17 00:23 243阅读 0赞

参照链接：

http://cn.vuejs.org/guide/index.html

【起步】部分

本文是在其基础上进行补全和更详细的探寻

嗯，根据朋友的建议，我改投vue阵营了

### （一）单向绑定 ###

<div id="app">
        {
       { message }}
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>

①el应该表示绑定的意思，绑定id=app这个标签

也可以改为以下这样：

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

el: '.app',

一样有效。

但如果是多个的话，**只对第一个有效**：

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

Hello Vue.js!

\{ \{ message \}\}

②data里的message变量，表示\{ \{message\}的值

### （二）双向绑定 ###

<div id="app">
        {
       { message }}
        <br/>
        <input v-model="message"/>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>

效果是：

①input输入框里有初始值，值是data里的message属性的值；

②修改输入框的值可以影响外面的值；

### （三）函数返回值 ###

<div id="app">
        {
       { message() }}
        <br/>
        <input v-model="message()"/>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: function () {
                    return 'Hello Vue.js!';
                }
            }
        })
    </script>

效果：

①输出值也是message的返回值；

**②缺点：失去双向绑定！**

### （四）渲染列表 ###

<div id="app">
        <ul>
            <li v-for="list in todos">
                {
       {list.text}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                todos: [
                    {text: "1st"},
                    {text: "2nd"},
                    {text: "3rd"}
                ]
            }
        })
    </script>

v-for里的list，类似for in里面的i，

个人认为，

①可以把list in todos，理解为for list in todos

②然后把下一行的list.text理解为 todos\[list\].text

然后这个v-for标签在哪里，就是以他为单位进行多次复制。

### （五）处理用户输入 ###

<div id="app">
        <input v-model="message">
        <input type="button" value="值+1" v-on:click="add"/>
        <input type="button" value="值-1" v-on:click="minus"/>
        <input type="button" value="重置归零" v-on:click="reset"/>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 1
            },
            methods: {
                add: function () {
                    this.message++; //这步要加this才能正确获取到值
                },
                minus: function () {
                    this.message--;
                },
                reset: function () {
                    this.message = 0;
                }
            }
        })
    </script>

效果：

①对输入框的值，点击一次add按钮，则值\+1；

②如果不能加，则像正常表达式加错了那样返回结果，例如NaN；

③data里的message的值，是初始值；

④methods里是函数集合，他们之间用逗号分隔；

⑤获取值的时候，要加上this，例如this.message获取的是message的值。

### （六）多功能 ###

<div id="app">
        <input v-model="val" v-on:keypress.enter="addToList">
        <ul>
            <li v-for="val in values">
                {
       {val.val}}
                <input type="button" value="删除" v-on:click="removeList($index)"/>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: "1",
                values: []
            },
            methods: {
                addToList: function () {
                    var val = parseInt(this.val.trim());  //注意，因为当上面的val是字符串类型的时候，才能用trim()，如果是数字类型，则用this.val
                    if (val) {
                        this.values.push({val: val});
                    }
                    this.val = String(val + 1);
                },
                removeList: function (index) {
                    this.values.splice(index, 1);
                }
            }
        })
    </script>

效果：

①初始输入框内值为1；

②在输入框内按回车键，则会将输入框的内容转为数字，并添加到一个列表里，该列表里转换后的数字和一个删除按钮，并且输入框内的值，变为转为数字后的值加一。

如图：

![20160823190617884][]

③他的添加，利用的是双向绑定，将输入的值push到data里面的values这个数组之种，然后利用渲染列表的效果，输出多行值。

④在button标签里，函数的参数名给了一个参数，是该行索引，参数名是$index

⑤标签里，触发的函数的函数名，可以加括号，也可以不加括号，实测似乎是没有影响的。

### **（七）标签和API总结（1）** ###

**①  \{ \{ 变量名 \}\}**

表示绑定的变量，调用时需要用this.变量名

**②  v-model=”变量”**