【vue基础】学习第一天

vue基础

如何创建一个vue程序

1. 导入vue.js

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2. 创建Vue实例对象，设置el属性和data属性
3. 使用简洁的模板语法把数据渲染到页面

<!--html-->
<div id="app">
	{{ message }} <!--插值表达式-->
</div>

//js
var app = new Vue({
    el: '#app', 
    data: {
        message: 'Hello ZYJ!
    }
})

el挂载点

1. vue实例的作用范围是什么呢？
   vue会管理el选项命中的元素以及其内部的后代元素。
   

2. 是否可以使用其他的选择器？
   可以使用其他的选择器，但是建议使用ID选择器。

3. 是否可以设置其他的dom元素呢？
   可以选择其他双标签，不能使用HTML和BODY。

data数据对象

1. vue中用到的数据定义在data中。
2. data中可以写复杂类型的数据。
3. 渲染复杂类型数据时，遵守js的语法即可。

    <div id="app" style="color: #ccc">
        {{ message }}
        <h2>{{school.name}}</h2>
        <p>{{school.mobile}}</p>
        <ul>
            <li>{{arry[0]}}</li>
            <li>{{arry[1]}}</li>
            <li>{{arry[2]}}</li>
            <li>{{arry[3]}}</li>
        </ul>
        <!--插值表达式-->
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello ZYJ!',
                school: {
                    name: 'zyj',
                    mobile: "400-418-9090"
                },
                arry: [1, 2, 3, 4, 5]
            }
        })</script>

vue应用

v-text

1. v-text指令的作用是：设置标签的内容（textContent）。
2. 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。
3. 内部支持写表达式。
4. 可以使用字符串拼接。

   <div id="app">
        <h2 v-text="message + '你好'">广州</h2>
        <h2 v-text="age">广州</h2>
        <h2>
            {{message + "你好"}} 广州
        </h2>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello ZYJ!',
                age: 18
            }
        })</script>

v-html

1. v-html指令的作用是：设置元素的innerHTML
2. 内容中有html结构会被解析为标签
3. v-text指令无论内容是什么，只会解析为文本
4. 解析文本使用v-text，需要解析html结构使用v-html

    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                content: ' <a href="http://baidu.com">百度</a>',
            }
        })</script>

v-on基础

1. v-on指令的作用是：为元素绑定事件
2. 事件名不需要写on，可以简写为@
3. 绑定的方法定义在methods属性中

    <div id="app">
        <input type="button" name="" id="" value="v-on指令" v-on:click="doIt">
        <input type="button" name="" id="" value="v-on指令" @click="doIt">
        <input type="button" name="" id="" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                food: "西兰花炒鸡蛋"
            },
            methods: {
                doIt: function () {
                    alert(111);
                },
                changeFood: function () {
                    this.food += "好好吃"
                }
            }
        })
    </script>

补充

1. 事件绑定的方法写成函数调用的形式，可以传入自定义参数
2. 定义方法时需要定义形参来接收传入的实参
3. 事件的后面跟上 . 修饰符可以对事件进行限制
4. 例如 .enter 可以限制触发的按键为回车
   事件修饰符

案例

   <div id="app">
        <input type="button" value="-" @click="sub">
        <span style="width: 100px;">{{num}}</span>
        <input type="button" value="+" @click="add">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                add() {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("已经是最大值！")
                    }
                },
                sub() {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("已经是最小值！")
                    }
                }
            }
        })
    </script>

v-show

1. v-show指令的作用是：根据真假切换元素的显示状态
2. 原理是修改元素的display，实现显示隐藏
3. 指令后面的内容，最终都会解析为布尔值
4. 值为true元素显示，值为false元素隐藏
   

    <div id="app">
        <li v-show="isShow">看不见我</li>
        <li v-show="!isShow">看见我啦</li>
        <li v-show="age>=18">我{{age}}岁啦！</li>
        <li v-show="age<18">我{{age}}岁啦！</li>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: false,
                age: 16
            }
        })
    </script>

v-if

1. v-if 指令的作用是：根据表达式的真假切换元素的显示状态
2. 本质是通过操纵dom元素来切换显示状态
3. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除

<div id="app">
	<p v-if="true">我是一个p标签</p>
	<p v-if="isShow">我是一个p标签</p>
</div>
<script> 
var app = new Vue({
	el: '#app',
	data: {
		isShow: false
	}
})
</script>

v-bind

1. v-bind指令的作用是：为元素绑定属性
2. 完整写法是v-bind：属性名，简写省略v-bind，保留:属性名
3. 需要动态的增删class建议使用对象的方式

<div id="app">
	<img :src="imgSrc">
	<img :title="imgTitle+'!!!'">
	<img :class="isActive?'active':''">
	<img :class="{active:isActive}">
</div>
<script>
var app = new Vue({
	el: "#app",
	data: {
		imgSrc: "图片地址",
		imgTitle："黑马程序员",
		isActive: false
	}
})
</script>

v-for

1. v-for指令的作用是：根据数据生成列表结构
2. 数组经常和v-for结合使用
3. 语法是(item-index)in 数据
4. item和index可以结合其他指令一起使用
5. 数据长度的更新会同步到页面上，是响应式的

<div id="app">
<ul>
	<li v-for="(item,index)in arr" :title="item">
	{{index}}{{item}}
	</li>
</ul>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data{
			arr:[1,2,3,4,5]
		}
	})
</script>

v-model

1. v-model指令的作用是便捷的设置和获取表单元素的值
2. 绑定的数据会和表单元素值相关联，一改全改

<div id="app">
	<input type="text" v-model="message"/>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data{
			message: "黑马程序员"
		}
	})
</script>