vue.js入门(一)创建vue对象和常用指令及使用示例

来源：互联网发布：网络教育学位证书编辑：程序博客网时间：2024/05/17 09:02

Vue官网中文网：https://cn.vuejs.org/

一、创建一个Vue对象

<script type="text/javascript" src="../js/jquery-3.1.1.js"></script><script type="text/javascript" src="../js/vue.js"></script>

<script>var vm = new Vue({  el: '#example',//定位操作对象，即需要渲染的div，里面包括需要用vue渲染的控件  data: {//数据json或者json数组的嵌套格式                myData:[],                username:'',                age:'',                nowIndex:-100  },  methods:{//声明在vue模型中使用的方法                  add:function(){                    this.myData.push({                        name:this.username,                        age:this.age                    });                    this.username='';                    this.age='';                    },                deleteMsg:function(n){                    if(n==-2){                        this.myData=[];                    }else{                        this.myData.splice(n,1);                    }                }          },  computed: {//创建数据监听器    // a computed getter    reversedMessage: function () {//定义回调function，返回基础数据的操作结果      // `this` points to the vm instance      return this.message.split('').reverse().join('')    }},    watch:{//用于监听message值得变化    'message':function(val,oldVal){    console.log(val,oldVal);    }  }});</script>

二、Vue常用指令

1、v-if指令

            <h1 v-if="yes">Yes!</h1>            <h1 v-if="no">No!</h1>            <h1 v-if="age >= 25">Age: {{ age }}</h1>            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>

2、v-show指令

            <h1 v-show="yes">Yes!</h1>            <h1 v-show="no">No!</h1>            <h1 v-show="age >= 25">Age: {{ age }}</h1>            <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>

3、v-else指令

            <h1 v-show="yes">Yes!</h1>            <h1 v-show="no">No!</h1>            <h1 v-show="age >= 25">Age: {{ age }}</h1>            <h1 v-else="sex='femail'">sex:{{sex}}</h1>

4、v-for指令

        var vm = new Vue({            el: '#app',            data: {                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'                }]            }        })

            <table>                <thead>                    <tr>                        <th>Name</th>                        <th>Age</th>                        <th>Sex</th>                    </tr>                </thead>                <tbody>                    <tr v-for="person in people">                        <td>{{ person.name  }}</td>                        <td>{{ person.age  }}</td>                        <td>{{ person.sex  }}</td>                    </tr>                </tbody>            </table>        </div>    </body>

5、v-bind指令

<body><!--v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:classv-bind:argument="expression"下面这段代码构建了一个简单的分页条，v-bind指令作用于元素的class特性上。 --> <div id="app">            <ul class="pagination">                <li v-for="n in pageCount">                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>                </li>            </ul>        </div> </body>    <script>        var vm = new Vue({            el: '#app',            data: {                activeNumber: 1,                pageCount: 10            }        })    </script>

6、v-on指令(处理事件)，并且v-on可以使用@符号替代

<body><!--v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：<a v-on:click="doSomething">有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。Greet按钮将它的单击事件直接绑定到greet()方法，而Hi按钮则是调用say()方法。-->  <div id="app">            <p><input type="text" v-model="message"></p>            <p>                <!--click事件直接绑定一个方法-->                <button v-on:click="greet">Greet</button>            </p>            <p>                <!--click事件使用内联语句-->                <button @click="say('Hi')">Hi</button>            </p>        </div>    </body>    <script>        var vm = new Vue({            el: '#app',            data: {                message: 'Hello, Vue.js!'            },            // 在 `methods` 对象中定义方法            methods: {                greet: function() {                    // // 方法内 `this` 指向 vm                    alert(this.message)                },                say: function(msg) {                    alert(msg)                }            }        })    </script>

三、使用v-model实现数据双向绑定

<div id="example">    <p>显示文本框的输入值：{{ message }}</p>    <input type="text" id="test1" v-model="message"/><br>    <input type="text" id="test2" v-model="message"/><script>        //model创建var exampleData = {            message: $("#test1").value        }        // 创建一个 Vue 实例或 "ViewModel"        // 它连接 View 与 Model        var vm=new Vue({            el: '#example',            data: exampleData        })</script>

以v-model实现双向绑定来理解vue.js的mv-vm框架模式：model即数据，V即数据显示，控件的值，vm即Vue对象。

0 0