Vue2.0 入门基础介绍

敲代码的小吉米

已于 2022-09-19 21:54:41 修改

阅读量1.6k

点赞数 8

分类专栏： Vue 文章标签： vue 前端

于 2022-09-19 21:49:55 首次发布

本文链接：https://blog.csdn.net/promise466/article/details/126941203

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue概述：

是一套用于构建用户界面的渐进式框架，简单，高效，生态丰富（插件多

特点：尤雨溪创造，v2与v3两个版本；渐进式JavaScript框架；结合了angular的指令与react的组件，虚拟dom

优点：中文文档完毕；生态丰富；上手简单（插件多）；指令组件虚拟dom

Vue的安装与使用

直接<script>引用

1、对于制作原型或学习：

3、兼容 ES Module 的构建文件：

4、直接下载：

https://v2.cn.vuejs.org/v2/guide/installation.html

使用

new Vue 函数创建一个新的应用实例

new Vue({

el:"#box", //指定vue的模板css选择器

data:{msg:"你好"} // 指定data数据

})

模板指定

文本渲染与指令

指令：指令是带有 v- 前缀的特殊 attribute。指令的属性值预期是单个 JavaScript 表达式

指令特点：

可以渲染实例的值 v-text="msg"

数学运算 v-text="2=3"

使用js表达式 v-text="msg，length" 执行js的普通方法split分割, reverse反转数组

如果是文本需要/只能加单引号 v-text=" ‘我爱中国’+msg"

声明式渲染：

<!DOCTYPE html>
<html lang="en">
 
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>你好vue！</title>
	</head>
 
	<body>
		<div id="app">
			<h1>{{msg}} </h1>
			<input type="text" v-model="msg"> <!--  指令 -->
		</div>
	</body>
	<script src="./js/vue.js"></script>  
	<script>
		Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
 
		new Vue({
			el: "#app", //指定模板返回
			data: {
				msg: "你好vue！",
			}, //指定数据
		})
    //el与data都是固定写法
	</script>
 
</html>

条件 v-if v-else-if v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>舞林大会{{score}}</h1>
			<h3 v-if="score>=90">独孤九剑</h3>
			<h3 v-else-if="score>=80">葵花宝典</h3>
			<h3 v-else-if="score>=70">三分归元气</h3>
			<h3 v-else-if="score>=60">小师妹嫁给你</h3>
			<h3 v-else>面壁思过</h3>
			<input type="text" v-model="score">  
		</div>
		<script src="./vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					score:65,
				}
			})
		</script>
    // v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
	</body>
</html>

条件 v-show

 <p v-if="flag">v-if</p>
            <p v-show="flag">v-show</p>

        new Vue({
                        el:'#box',
                        data:{
                            flag:false,
                           }
                   })

        <!-- v-if与v-show的区别
        1.都是用来控制隐藏与显示
        2.v-if是通过dom操作实现隐藏(注释隐藏）， v-show是通过css display:none方式隐藏
        3.频繁切换用v-show -->
            最大的不同就是隐藏方式

遍历 v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>v-for</h1>
			<!-- 遍历字符串 -->
			<p v-for="item in str">{{item}}</p>
			<!-- 遍历对象 -->
			<p v-for="item in obj">{{item}}</p>
			<!-- 遍历数组 -->
			<p v-for="item in 10">{{item}}</p>
			
			<p v-for="(item,key) in obj" :key="key">{{key}}:{{item}}</p>
		</div>
		<script src="../../vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					str:"学好前端，月薪过万",
					obj:{
						tel:888888,
						qq:6666666,
						wx:98989,
					}
				}
			})
            // item  遍历的元素（自定义的名称）
            // index  遍历的下标
            // list  被遍历的数据

           // v-key 值必须是唯一 ,为了让Vue更好的优化渲染列表
		</script>
	</body>
</html>

处理用户输入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<input type="text" v-model="msg">  
		</div>
		<script src="../../vue.js"></script>
		<script>
			new Vue({
				el:"#app",//指定模板返回（element）
				data:{
					msg:"你好Vue！"
				},//指定数据
			})
			//el与data都是固定写法
		</script>
	</body>
</html>

属性渲染

v-bind指令 (通常缩写为：)给html标签动态的绑定属性

<h1 v-bind:title="str">这是一个title</h1>  //:title是v-bind：title缩写

<script type="text/javascript">
            new Vue({
                el:'#box',
                data:{
                    str:'一句简单的话',
                    
                }
            })
            //v-bind指令
            //:title指令参数
            //str 指令的值
        </script>

事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件监听</title>
	</head>
	<body>
		<div id="app">
			<h1>事件</h1>
			<button v-on:click="num++"> {{num}}</button>
			<button @click="num+=2">{{num}}</button>  //@是简写
		</div>
		
		<script src="../vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					num:1
				}
			})
			
		</script>
	</body>
</html>