Vue 快速入门

el:挂载点

el 是用来设置 Vue 实例挂载（管理）的元素
Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用 ID 选择器
可以使用其他的双标签，不能使用 HTML 和 BODY

data:数据对象

Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据
渲染复杂类型数据时，遵守 js 的语法即可

<div id="app">
	{{ message }}
</div>

var app = new Vue({
	el:"#app",
	data:{
		message:"嘿嘿嘿",
		array:[],
		obj:{}
	}
})

v-text

v-text指令的作用是：设置标签的内容（textContext）
默认写法会替换掉全部内容，使用差值表达式 {{}} 可以替换指定内容
内容支持写表达式

<div id="app">
	<h2 v-text="message+'!'"></h2>
	<h2>北京{{ message + "!"}}</h2>
</div>

var app = new Vue({
	el:"#app",
	data:{
		message:"哈哈哈"
	}
})

v-html

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

<div id="app">
	<p v-html="context"></p>
</div>

var app = new Vue({
	el:"#app",
	data:{
		context:"<a href='#'>嘿嘿嘿</a>"
	}
})

v-on

v-on 指令的作用是：为元素绑定事件
事件名不需要写 on
指令可以简写为 @
绑定的方法定义在 methods 属性中
方法内部通过 this 关键字可以访问定义在 data 中的数据

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello Vue</title>
</head>
 
<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="showIt">打印食物</h2>
        <h2 @click="eatFood">{{ food }}</h2>
    </div>
 
    <!-- 1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        //3.创建 Vue示例
        var app = new Vue({
            el:"#app",
            data:{
                food:"冰淇淋"
            },
            methods:{
                doIt:function(){
                    alert("Just do it");
                },
                showIt:function(){
                    console.log(this.food);
                },
                eatFood:function(){
                    this.food += "好好吃！"
                }
            }
        })
    </script>
</body>
 
</html>

v-on 补充

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello Vue</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt('老铁',666)">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(p1,p2){
                    console.log("Just do it ！");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("吃饭了没");
                }
            }
        })
    </script>
</body>

</html>

计数器

实现步骤：

data 中定义数据：比如 num
methods 中添加两个方法：比如add（递增），sub（递减）
使用 v-text 将 num 设置给 span 标签
使用 v-on 将 add，sub 分别绑定给+，-按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello Vue</title>
</head>

<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        <!-- 计数器功能区域 -->
        <div class="input-num">
            <button @click="sub"> - </button>
            <span>{{ num }}</span>
            <button @click="add"> + </button>
        </div>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        //3.创建 Vue示例
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num < 10){
                        this.num++;
                    }else{
                        alert("别点啦，最大啦！");
                    }
                },
                sub:function(){
                    if(this.num > 0){
                        this.num--;
                    }else{
                        alert("别点啦，最小啦！")
                    }
                }
            }
        })
    </script>
</body>

</html>

v-show

v-show 指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为 true 元素显示，值为 false 元素隐藏
数据改变之后，对应元素的显示状态会同步更新

<div id="app">
	<img src="地址" v-show="true">
	<img src="地址" v-show="isShow">
	<img src="地址" v-show="age>=18">
</div>

var app = new Vue({
	el:"#app",
	data:{
		isShow:false,
		age:16
	}
})

v-if

v-if 指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵 DOM 元素来切换显示状态
表达式的值为true，元素存在于 DOM 树中，为 false，从 DOM 树中移除
频繁的切换 v-show,反之使用 v-if,前者的切换消耗小

<div id="app">
	<p v-if="true">我是一个p标签</p>
	<p v-if="isShow">我是一个p标签</p>
	<p v-if="表达式">我是一个p标签</p>
</div>

var app = new Vue({
	el:"#app",
	data:{
		isShow:false
	}
})

v-bind

v-bind 指令的作用是：为元素绑定属性
完整的写法是 v-bind:属性名
简写的话可以直接省略 v-bind，只保留：属性名

<div id="app">
    <img v-bind:src="imgSrc">
    <img v-bind:title="imgtitle+'!!!'">
    <img v-bind:class="isActive?'active':''">
    <img v-bind:class="{active:isActive}">
</div>

var app = new Vue({
    el:"#app",
    data:{
        imgSrc:"图片地址",
        imgTitle:"这是一张图片"
        isActive:false
    }
})

图片切换

定义图片数组
添加图片索引
绑定src属性
图片切换逻辑
显示状态切换

<div id="app">
    <img :src="imgArr[index]">
    <a href="#" @click="prev" v-show="条件">上一张</a>
    <a href="#" @click="next" v-show="条件">下一张</a>
</div>

var app = new Vue({
    el:"#app",
    data:{
        imgArr:[],
        index:0
    },
    methods:{
        prev:function(){},
        next:function(){}
    }
})

v-for

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

<div id="app">
    <ul>
        <li v-for="{item,index} in arr":title="item">
        {{ index }}{{ item }}
        </li>
        <li v-for="{item,index} in objArr">
        {{ item.name}}
        </li>
    </ul>
</div>

var app = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3,4,5],
        objArr:[
            {name:"jack"}
            {name:"rose"}
        ]
    }
})

笔记参考课程：https://www.bilibili.com/video/BV12J411m7MG

el:挂载点

data:数据对象

v-text

v-html

v-on

v-on 补充

计数器

v-show

v-if

v-bind

图片切换

v-for

猜你喜欢