Vue的部分方法

最新推荐文章于 2020-04-21 14:58:15 发布

Hgrtea

最新推荐文章于 2020-04-21 14:58:15 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/Hgrtea/article/details/94325589

版权

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

首先要注意的是Vue必须要等到整个页面加载完成之后才能完整渲染使用·，所以它开始是下面这样

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				var vm = new Vue({
					el: '#box', //el Vue要作用的标签
					data: { //数据
						msg: 'Hello Vue'
					}，
					methods{}
				});
			}
		</script>

在上面el就是你要用vue控制的范围data就是要定义的变量名。methods是方法

数据绑定

Vue中的数据绑定是用双大括号括起来的{{mesg}},此外也可以加一些简单的js代码，如msg+'world’等，再通过转意获得文本中的标签和文字。

<span v-html="myele"></span>
<h2 v-text="myele"></h2>

上面两个方法的意思基本上跟JQ中的一致。
v-model 这个标签主要用于input标签中的内容变量。
v-show 用于层的显示和隐藏，true为显示false为隐藏。

计算和监视属性

computed 计算属性，第一次初始化显示的时候,调用一次, 然后函数里面相关的属性值发生变化的时候也会调用
watch 配置监视，属性值的变化的监视函数里面的参数,第一个新变化的值,第二个是变化之前的就值，如下

name1: function(newValue, oldValue) {
 this.fullname=newValue;
						}

style属性的绑定

	data: {
						aData: 'yellow',
						bData: '100px',
						cJson: {
							color: 'blue',
							fontSize: '30px',
							fontStyle: 'italic'																																																						
						},
						dJson: {
							color: 'pink',
							fontSize: '130px'
						},
						eJson: {
							color: 'green',
							fontSize: '50px'
						},
						f: true
					}
					
<body>
		<div id="box">
			<h1 style="color: #FF0000;font-size: 40px;">一行文本</h1>
			<!-- 绑定style属性 
			  style的值需要的是一个对象 对象中值是字符串的话，要用引号引起来
			  css属性名中 有 "-" 连接的 要去掉 "-" "-"后面的首字母大写
			<h1 :style="{color:'#FF0000',fontSize:'40px'}">一行文本</h1>
			<h1 :style="{color:aData,fontSize:bData}">一行文本</h1>
			<!-- 多个对象可以使用[] 括起来 -->
			<!-- <h1 :style="[cJson,dJson]">一行文本</h1> -->
			<h1 :style="[cJson]">一行文本</h1>

IF条件语句

直接粘代码一目了然

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				new  Vue({
					el:'#box',
					data:{
						score:0
					}
					
				});
			}
		</script>
	</head>
	<body>
		<div id="box">
			<input type="text" id="" value="" placeholder="请输入你的成绩" v-model="score"/>
			<h1 v-if="score>=0&&score<60">不及格</h1>
			<h1 v-else-if="score>=60&&score<70">差</h1>
			<h1 v-else-if="score>=70&&score<80">良好</h1>
			<h1 v-else-if="score>=80&&score<99">优秀</h1>
			<h1 v-else-if="score==100">满分</h1>
			<h1 v-else>不合法</h1>
		</div>

if条件语句2

window.onload=function(){
				new  Vue({
					el:'#box',
					data:{
						isShow:false
					}
					
				});
			}

<div id="box">
			<h1 v-show="false">啊打发打发</h1>
			<h1 v-if="isShow">成功</h1>
			<h1 v-else>失败</h1>
			<button type="button" @click="isShow=!isShow">切换</button>
		</div>

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

for循环

<ul>
				<li v-for="obj,index in jsonArray" :key="index">
					{{obj.name}}-----{{obj.age}}----{{obj.sex}}---<button type="button" @click="delElE(index)">删除</button>---<button
					 type="button" @click="updateEle(index,{
							'name': '赵六',
							'age': 26,
							'sex': '女'
						})">更新</button>

				</li>

Hgrtea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的部分方法

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。首先要注意的是Vue必须要等到整个页面加载完成之后才能完整渲染使用·，所以它开始是下面这样<script src="js/vue.js" type="text/javas...
复制链接

扫一扫