Vue 快速入门

时间：2020-06-19 15:52:14 阅读：67 评论：0 收藏：0 [点我收藏+]

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/vue@2.6.11"></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/vue@2.6.11"></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/vue@2.6.11"></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

Vue 快速入门

原文：https://www.cnblogs.com/snailzh/p/13163011.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)