vuejs初探

初学Vue.js，一上来就遇到了坑，我完全按照官网来的，但一直不能显示变量，日了狗了，后来搜索了一下发下问题。

1、Django在取变量值方面与vue.js冲突

两个都是用{{}}获取变量，因此出现了冲突。 对于这个问题有几种解决办法：

（1）最直白得就是禁用django模板渲染

django标签 verbatim可以使包裹其中的代码不进行渲染保持原样输出

{% verbatim %} {{ vue }} {% endverbatim %}

####（2）重新定义vue绑定符号

在很多资料里，使用如下方式修改：

Vue.config.delimiters = ["[[", "]]"];

执行这个之后，你就可以使用“[[”、“]]”来绑定变量的数据了。

但是在最新的vue.js版本（2.3.0）中，却不管用。

在stackoverflow中，查到了最新方法：

Vue中定义： 

  new Vue({
    el：‘#vueapp',
    delimiters:["[[", "]]"],
    data:.....,

今天敲了一遍vue.js的实例代码，敲得越多，越发现，vue.js真特么好用，有种相见恨晚的感觉。

贴上一个比较基本，包含了大多数vue基础的例子吧： 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles/demo.css" />
</head>

<body>
    <div id="app">

        <fieldset>
            <legend>
                Create New Person
            </legend>
            <div class="form-group">
                <label>Name:</label>
                <input type="text" v-model="newPerson.name"/>
            </div>
            <div class="form-group">
                <label>Age:</label>
                <input type="text" v-model="newPerson.age"/>
            </div>
            <div class="form-group">
                <label>Sex:</label>
                <select v-model="newPerson.sex">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
            </div>
            <div class="form-group">
                <label></label>
                <button @click="createPerson">Create</button>
            </div>
    </fieldset>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Sex</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="person in people">
                <td>{{ person.name }}</td>
                <td>{{ person.age }}</td>
                <td>{{ person.sex }}</td>
                <td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td>
            </tr>
        </tbody>
    </table>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            newPerson: {
                name: '',
                age: 0,
                sex: 'Male'
            },
            people: [{
                name: 'Jack',
                age: 30,
                sex: 'Male'
            }, {
                name: 'Bill',
                age: 26,
                sex: 'Male'
            }, {
                name: 'Tracy',
                age: 22,
                sex: 'Female'
            }, {
                name: 'Chris',
                age: 36,
                sex: 'Male'
            }]
        },
        methods:{
            createPerson: function(){
                this.people.push(this.newPerson);
                // 添加完newPerson对象后，重置newPerson对象
                this.newPerson = {name: '', age: 0, sex: 'Male'}
            },
            deletePerson: function(index){
                // 删一个数组元素
                this.people.splice(index,1);
            }
        }
    })
</script>
</html>

这个例子很好理解，就是创建了一个表格，显示三个字段。同时，可以通过createPerson方法创建新的行。

--------EOF---------
微信分享/微信扫码阅读