框架小白白白白的进阶之路---Vue（一）

最新推荐文章于 2023-06-17 09:52:05 发布

兜里ヌ有糖

最新推荐文章于 2023-06-17 09:52:05 发布

阅读量162

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_43980232/article/details/107682165

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

框架简介：
美化用的框架（html5+css3）：bootstrap、ElementUI
JavaScript框架：jquery、Vue
JavaScript与jquery使用传统js思想（操作dom）进行开发
Vue采用MVVM开发模式

Vue

MVVM开发模式：
M:Modle 数据
V:View 视图
VM：viewModle
数据发生改变时会先通知viewModle，然后viewModle会去改变View
一个简单的实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1. 引包 -->
		<!-- 使用CDN加速的引包方法 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
		<!-- 使用本地的Vue包 -->
		<!-- <script src="js/vue.min.js"></script> -->
	</head>
	<body>
		<!-- 3. 绑定数据 -->
		<div id="a1">
			{{name}}{{number}} <!-- 视图 -->
		</div>
		<script type="text/javascript">
			//2. 创建Vue对象   VM（viewModle）视图模型 
			let vm=new Vue({
				el:'#a1',
				data:{  //数据
					number:456,
					name:"tom",
				}
			});
		</script>
	</body>
</html>

结果
在这里插入图片描述

vue双向绑定数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		    Hello：{{ name }} <!--获取变量 name   会根据下面的input输入的值进行同步变化-->
		    <br />
		    <br />
		    <input v-model="name"> <!--v-model是vue的一个指令   input框的初始值与下面data中name值相同-->
		</div>
		    
		<!-- data的值与v-modle的值可以相互影响，这就叫做双向绑定 -->
		
		<script type="text/javascript">
			let vm=new Vue({
				el:'#app',
				data:{  
					name:"tom",
				}
			});
		</script>
	</body>
</html>

结果
在这里插入图片描述

Vue文本渲染
v-text：更新元素的innerText 等价于innerText ：将内容当做文本打印到浏览器界面
v-html：更新元素的innerHTML 等价于innerHtml ：将内容当做HTml语句替换进去
示例：

		<div id="app">
			<div >{{message}}</div>
			<div v-text="message1"></div>
			<div v-html="message2"></div>
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:"#app",
				data:{
					message:"文字绑定",
					message1:"<h1>文字绑定</h1>",
					message2:"<h1>文字绑定</h1>",
				}
			})
		</script>

显示结果
在这里插入图片描述
一下三个了解即可：
v-once：静态插值 值不会被改变
v-pre：原格式输出 相当于html中的<pre></pre>
v-cloak：指令保持在元素上直到关联实例结束编译
属性绑定
v-bind
v-bind:style="***"
示例

		<div id="app">
			<div v-bind:style="style1">
			<!-- v-bind:style 中的 v-bind 可以省略，即 v-bind:style 可以缩写为 :style -->
			</div>
		</div>
		<script>
			let vm=new Vue({
				el:"#app",
				data:{
					style1:"height:100px;width:100px;border:1px black solid",
				}
			})
		</script>

结果
在这里插入图片描述
属性绑定扩展
在属性绑定中 v view,m modle
v 可以用属性，对象{key,value} , 数组[]
M 可以用属性，对象{key,value} , 数组[]

在V中写属性，对应属性值为“引用”
在对象中 key值为具体值，value值为引用
在数组中对应的值都为引用
如果想将引用改为具体的值，则需用单引号括起来
事件绑定
v-on:也可以缩写为一个@
点击事件：v-on:click="**"
**是定义在vm中的methods下的方法，也可以是一个函数的函数体（相当于定义了一个匿名方法，不推荐）
示例

		<div id="app">
			<div>{{msg}}</div>
			<button v-on:click="a()">你点我呀</button>
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:"#app",
				data:{
					msg:'hello',
					i:0
				},
				methods:{
					a(){
						if(this.i%2==0){
							this.msg='hello word!'
						}else{
							this.msg=" hello vue!"
						}
						this.i++;
					}
				}
			})
		</script>

结果
在这里插入图片描述

事件修饰符
stop 阻止冒泡（冒泡：点击子标签，会触发父标签的点击事件的现象叫做冒泡）

prevent 阻止默认事件

 <a href="http://cnblogs.com" target="_blank">普通链接</a>  <!-- 点击a标签可以跳转到相应链接的网址 -->
 <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a><!-- 点击a标签不可以跳转到相应链接的网址，prevent取消了a标签默认的跳转行为 -->

once 只触发一次

<button v-on:click.once="c2">{{message2}}</button> <!-- 被once修饰的事件只能触发一次，比如此语句，只有在第一次进行点击时才会触发c2函数 -->

兜里ヌ有糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
框架小白白白白的进阶之路---Vue（一）

框架简介：美化用的框架（html5+css3）：bootstrap、ElementUIJavaScript框架：jquery、VueJavaScript与jquery使用传统js思想（操作dom）进行开发Vue采用MVVM开发模式VueMVVM开发模式：M:Modle 数据V:View 视图VM：viewModle数据发生改变时会先通知viewModle，然后viewModle会去改变View一个简单的实例<!DOCTYPE html><html> &l
复制链接

扫一扫