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

Vue官网中文网：https://cn.vuejs.org/一、创建一个Vue对象var vm = new Vue({el: '#example',//定位操作对象，即需要渲染的div，里面包括需要用vue渲染的控件data: {//数据json或者json数组的嵌套格式myData:[],

格乄子

6946人浏览 · 2017-03-13 17:25:13

格乄子 · 2017-03-13 17:25:13 发布

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:class

	v-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对象。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^