vue入门

vue入门

基本使用：

导包
构建HTML
使用vue（实例化vue对象进行一系列操作）

基本语法：

操作数据：

<div class="box">{{ content }}</div>

<script>
	var vm = new Vue({
		el: '.box'
		data: {
			content: 'xxx'
		}
	});
</script>

修改属性：

<div class="box">{{ content }}</div>
<a v-bind:herf="url"></a>     // 也叫单向绑定
// 简写<a :herf="url"></a>

<script>
	var vm = new Vue({
		el: '.box',
		data: {
			content: 'xxx',
			url: 'xxx'
		},
	});
</script>

调用方法：

<div class="box">{{ content }}</div>
<button v-on:click='add'>计数器{{ count }}</button>
// 简写 <button @click='add'>计数器{{ count }}</button>

<script>
	var vm = new Vue({
		el: '.box',
		data: {
			content: 'xxx',
			url: 'xxx',
			count: 0
		},
		methods:{
			add:function(){
				this.count += 1;
			}
		},
	});
</script>

条件渲染：

v-if

v-show
注意：
	v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的
	在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突

列表渲染：

<script>
    window.onload = function () {
    var vm = new Vue({
        el:'.box',
        data:{
            // 01: 普通列表
            itemList:[1, 2, 3, 4, 5],
            // 02: 列表下标
            indexList:['a','b','c','d'],
            // 03: 有且只有一个对象
            objData:{
                name:'小明',
                age:19
            },
            // 04: 对象列表
            objList:[
                {
                    name:'小明',
                    age:20
                },
                {
                    name:'小红',
                    age:21
                }
            ]
        }
    });
}
</script>

普通列表：
<li v-for='item in itemList'>{{item}}</li>

列表下标：
<li v-for='(item,index) in indexList'>角标{{index}}==数值{{item}}</li>

有且只有一个对象：
<li v-for='item in objData'>{{item}}</li>
<li v-for='(obj,key) in objData'>属性值{{obj}}-----属性名{{key}}</li>

对象列表
<li v-for='obj in objList'>属性值1:{{obj.name}}==属性值2:{{obj.age}}</li>

双向绑定：

一般用在表单输入，主要是将view和model进行双向绑定，这样不管是view的属性发生变化还是model实例化的对象的属性发生变化，都能同时改变

v-model

<!-- 01.单行文本框 -->
        <input type="text" v-model='content'>
        <p>{{content}}</p>

<!-- 02.多行文本框 -->
        <textarea v-model='content'></textarea>
        <p>{{content}}</p>

<!-- 03.单选框 -->
        <input type="radio" name="sex" value="男" v-model='content'>男
        <input type="radio" name="sex" value="女"  v-model='content'>女
        <p>{{content}}</p>

<!-- 04.多选框 -->
        <input type="checkbox" name="lk" value="吃饭" v-model='like'>吃饭
        <input type="checkbox" name="lk" value="睡觉" v-model='like'>睡觉
        <input type="checkbox" name="lk" value="打豆豆" v-model='like'>打豆豆
        <p>{{like}}</p>     

<!-- 05.下拉框 -->
        <select name="addr" v-model='address'>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
        <p>{{address}}</p>