2021-08-06 Vue（二）

最新推荐文章于 2021-08-16 16:33:50 发布

小李要努力学习

最新推荐文章于 2021-08-16 16:33:50 发布

阅读量353

点赞数 1

分类专栏：二阶段

本文链接：https://blog.csdn.net/weixin_48400115/article/details/119462828

版权

二阶段专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js框架的核心特性，包括MVVM模式如何实现数据和视图的自动同步，以及v-model、v-if、v-for等指令的使用。此外，还探讨了v-cloak解决闪烁问题和v-on处理事件的方法，展示了Vue.js如何提升开发效率和用户体验。

摘要由CSDN通过智能技术生成

MVVM框架

我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，无需写代码，非常棒的一个改进。这是javascript，jquery，bootstrap等无法做到的，也是前端Vue推崇的原因，也标示着jquery的终结。

方法必须写在methods代码段中
方法体中访问数据代码段中声明的变量，前面加this
方法和属性声明方式的差异在于 function(){}
方法和属性调用的差异是 {{msg}} {{sayHello()}}，名称后加小括号

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="js/vue.js" type="text/javascript">
       </script>
   </head>
   <body>
       <div id="app">
           <p>加法{{2+3}}</p>
           <p>加法{{2*3}}</p>
           <p>字符串操作{{str.length}}</p>
           <p>三元运算符{{age>10?true:false}}</p>
           <p>{{p.name+p.age}}</p>
           <button οnclick="alert(100)">普通按钮</button>
           <button v-on:click="show()">无参方法</button>
           <button v-on:click="syso(10)">有参方法</button>
       </div>
       <script type="text/javascript">
           new Vue({
               el:"#app",
               data:{
                   str:"hellovue!",
                   age:12,
                   p:{//vue定义对象
                       name:"lisi",
                       age:20
                   }
               },
               //无参函数
               //含参函数
               methods:{
                   show:function(){
                       alert("show方法")
                   },
                   syso:function(dd){
                       alert(dd)
                   }
               }

               /*data第二张写法定义函数,返回对象 */
               /* data:function(){
                   return{
                       str:"hellovue!",
                       age:12,
                       p:{//vue定义对象
                           name:"lisi",
                           age:20
                       }
                   }
               }, */
               // 第三种形式:定义函数,es6的简写法
               /* data(){
                   return{
                       str:"hellovue!",
                       age:12,
                       p:{//vue定义对象
                           name:"lisi",
                           age:20
                       }
                   }
               } */
           })
       </script>
   </body>
</html>

高级用法：v-指令

指令用于在表达式的值改变时，以表示它们是Vue提供的特殊特征

可以直接用于在表达式的值改变时，将某些行为应用到DOM上。

双向绑定 v-model

通过指令v-model。实现双向绑定，修改一方的同时修改相同的另一方，达到数据同时更新。

MVVM是将"数据模型双向绑定"的思想作为核心，在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此View视图的数据的变化会同时修改Model数据源，而Model数据源数据的变化也会立即反应到View视图上。

闪现 v-cloak

F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，观察问题。

遇到插值表达式加载时闪烁对用户不好的现象，那怎么解决呢？

在标签中增加指令：v-cloak
增加style标签，[v-cloak]属性选择器，设置先不展示display:none;

判断 v-if

v-if指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素

Tip: 什么时候用 v-if ，什么时候用v-show?

v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的

v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

循环 v-for

v-for 指令可以绑定数组的数据来渲染一个项目列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript">
		</script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>{{msg}}</h1>
		<div id="app" v-cloak>
			<input type="text" v-model="msg"/>
			<h2>{{msg}}</h2>
			<h3>{{msg}}</h3>
			<h4>{{msg}}</h4>
			<h5>{{msg}}</h5>
			<h6>{{msg}}</h6>
	
	<input type="text" v-model="age"/>		
	<p v-if="age>=60">老人</p>
	<p v-else-if="age>=30">成年人</p>
	<p v-else-if="age>=18">青少年</p>
	<p v-else>小学生</p>
	<h1>{{age}}</h1>
	
	
	<p v-for="arr in arr">{{arr}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					msg:'生在红旗下,长在春风里！',
					age:"",
					arr:["唱","跳","rap"],
				}	
			})
		</script>
	</body>
</html>

事件 v-on

@click为v-on:click的缩写

绑定 v-bind

当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="js/vue.js" type="text/javascript">

       </script>
   </head>
   <body>
       <div id="app">
           <button type="button" v-on:click="show()">show方法</button>
           <button type="button"><a v-bind:href="url">百度</a></button>
       </div>
       <script type="text/javascript">
           new Vue({
               el:"#app",
               data:{
                   show:function(){
                       alert("show方法")
                   },
                   url:"https://www.baidu.com"
               }
           })
       </script>
   </body>
</html>

小李要努力学习

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-06 Vue（二）

MVVM框架我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，无需写代码，非常棒的一个改进。这是javascript，jquery，bootstrap等无法做到的，也是前端Vue推崇的原因，也标示着jquery的终结。方法必须写在methods代码段中方法体中访问数据代码段中声明的变量，前面加this 方法和属性声明方式的差异在于 f
复制链接

扫一扫

专栏目录