ch1-vuejs基础入门

1 hello world  引入vue.min.js 代码： ----2.0+版本        <div id="test">          {{str}}       </div>       <script>          var app = new Vue({             el: ‘#test‘,             data: {                str: ‘hello world vuejs‘             }          });       </script>2 v-bind 指令(v-)    v-bind:title=‘str‘    绑定到title,title显示的时候就会触发

3 条件与循环  条件 v-if="表达式的结果" 结果为真显示否则隐藏  循环 v-for 同for() 数据源为data的值

4 事件监听 v-on 代码展示    <div id="test5">        <p>{{str}}</p>        <button v-on:click="reverseStr">逆转显示</button>    </div>

var app5 = new Vue({            el: ‘#test5‘,            data: {                str: ‘hello world Vue.js‘            },            methods: {                reverseStr: function () {                    this.str = this.str.split(‘‘).reverse().join(‘‘);                }            }        });

5 v-model 使表单输入和应用状态间双向绑定 同ng-model    <div id="test6">        <p>{{str}}</p>        <input type="text" v-model="str">    </div>    var app6 = new Vue({            el: ‘#test6‘,            data: {                str: ‘两只老虎跑得快‘            }        });

6 vue.js内置的指令        v-if 条件渲染指令        v-show 条件渲染指令 指令的元素始终会被渲染到html,这是简单的为元素设置style属性        v-else        可以为v-if或v-show添加一个‘else块‘，必须跟在其后面        v-else的元素是否显示取决于前面是v-if还是v-show v-if为true v-else不会渲染到dom v-show为true或false  v-else都不会渲染到html        v-for 遍历数组 xx in xx        v-bind 语法：v-bind:argument=‘expression‘                    argument表示html元素的特性如(attribute) 或 v-bind:class 可以高亮当前页 可缩写为:一个冒号        v-on 语法与v-bind类似 监听dom事件                    调用方法：1 绑定一个方法名（让事件指向方法的引用）2 使用内联语句（执行方法） 可缩写为：@符号

7 应用组件化 --用小型，自包含和可以复用的组件构建大型应用        <div id="test">            <my-component></my-component>        </div>        <script>            Vue.component(‘my-component‘,{               template: ‘<h1>原来是个h1</h1>‘            });            var app = new Vue({                el: ‘#test‘,            })        </script>

<div id="test">            <my-component v-for="item in groceryList" :todo="item"></my-component>        </div>        <script>            Vue.component(‘my-component‘,{                //组件现在接收一个 ‘prop‘类属于一个自定义属性属性名为todo                props: [‘todo‘],                template: ‘<h2>{{todo.text}}</h2>‘            });            var app = new Vue({                el: ‘#test‘,                data: {                    groceryList: [                        { text: ‘蔬菜‘ },                        { text: ‘奶酪‘ },                        { text: ‘随便其他什么人吃的东西‘ }                    ]                }            })        </script>

8 小案例---由于 $index 问题 案例使用 ---vue.js 1.0.5

　　

<div id="app">

<fieldset>        <legend>            添加新用户        </legend>        <div class="form-group">            <label>姓名:</label>            <input type="text" v-model="newPerson.name"/>        </div>        <div class="form-group">            <label>年龄:</label>            <input type="text" v-model="newPerson.age"/>        </div>        <div class="form-group">            <label>性别:</label>            <select v-model="newPerson.sex">                <option value="男" selected = "selected">男</option>                <option value="女">女</option>            </select>        </div>        <div class="form-group">            <label></label>            <button @click="createPerson">添加</button>        </div>    </fieldset>    <table class="table table-bordered">        <thead>        <tr>            <th>姓名</th>            <th>年龄</th>            <th>性别</th>            <th>删除</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)">删除</button></td>        </tr>        </tbody>    </table></div>

<script>    var app = new Vue({        el: ‘#app‘,        data: {            newPerson: {                name: ‘‘,                age: 0,                sex: ‘男‘            },            people: [{                name: ‘张三‘,                age: 30,                sex: ‘男‘            }, {                name: ‘李四‘,                age: 26,                sex: ‘男‘            }, {                name: ‘王五‘,                age: 22,                sex: ‘女‘            }, {                name: ‘赵六‘,                age: 36,                sex: ‘男‘            }]        },        methods: {            createPerson: function () {                this.people.push(this.newPerson);                //添加完newPerson对象后，重置newPerson对象                this.newPerson = {name:‘‘,age:‘‘,sex:‘男‘}            },            deletePerson: function (index) {  //实参$index在2.0+版本无此功能                this.people.splice(index,1);            }        }    })</script>