Javascript

Vue2.0学习笔记

本文主要是介绍Vue2.0学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.前言

其实对于我来说，学校的知识对于毕业找工作是肯定不够的，所以只能不断的扩充自己学习一些新的知识，技术更迭变化也挺快的。所以我vue进行一个简单的学习。

2.模板及其简单的语法

   1.简单要素介绍

<body>
		<div id="hellovue"> 
			<p>{{label}}</p> 
		</div>
	<script>
		new Vue({
			el:'#hellovue',	
			data:{
				label:'hello vue!'
			},
            methods:{
                  },
		})
	</script>
</body>
  • {{label}} 这个双括号括起来的是文本插值是用来进行数据的绑定的。使用vue的data进行声明我们所需要的数据，以上的例子我将 <p>的内容改为了“hello vue”。

简而言之：{{}} 用于输出对象属性和函数返回值

  • el 可以用来指定DOM的id，以方便我们对知道的DOM进行修改一些数据添加一些函数.
  • method 就是函数，可以使用return来返回值，它包含了页面的整个逻辑以及一些触发事件。

     2.模板语法的介绍

  1. v-html 用于输出html的代码，以标签的新式更新
	<body>
		<div id="hellovue"> 
			<p>{{label1}}</p>
			<p v-html="label2"></p>
		</div>
	<script>
		new Vue({
			el:'#hellovue',	
			data:{
				label1:"仅修改文本",
				label2:'<h1>这里是标签语言（标题）</h1>'
			},
		})
	</script>
	</body>

        2.v-text 对有该语句的元素的内容进行替换

注：此处和插值表达式不同的是，它会对整个元素内容进行替换，比如说我替换的内容是hello

<p>{{label}} vue</p>

结果为：hello vue

<p v-text='label'>vue</p>

结果为：hello

	<body>
		<div id="hellovue"> 
			<p v-text="label2">123456</p>
		</div>
	<script>
		new Vue({
			el:'#hellovue',	
			data:{
				label2:'我不是123456'
			},
		})
	</script>
	</body>

        3.v-cloak 可以解决页面使用插值表达式闪烁的问题

<div v-cloak>{{ok}}</div>
<style type="tetxt/css">
[v-cloak]{
    display:none;
    }
</style}

         4.v-model 实现了数据的双向绑定，它会使另一方的元素 同时发生改变

<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello vue!'
  }
})
</script>
</body>

注：当文本框输入内容时，绑定的message内容也发生改变

         5.v-once 指的是指令指渲染一次，使用了该指令的元素、组件和所有的节点，都会当作静态内容并跳过。（可用于优化更新性能）

<body>
	<div id="app"> 
		<p v-once>渲染一次数据:{{text}}</p>
		<p>可以改变的数据:{{text}}</p>
		<p ><input type="text" v-model = "text"></p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			text:"当前内容 "
		},
		methods:{
		},
	})
</script>
</body>

        6.v-on 可以用来绑定事件也可以用来传递参数

<body>
	<div id="onclick"> 
		<p>{{message}}</p>
		<input type="button" value="单击事件" v-on:click="alert"> 
	</div>
<script>
	new Vue({
		el:'#onclick',	
		data:{
		message:'ok'
		},
		methods:{
		alert:function() {
			this.message='chagetext'
		}	
		},
	})
</script>
</body>

 

 注;v-on 可以缩写为@click

        7.v-if 根据表达式v-if（我这里使用了bool）的值(true 或 false )来决定是否插入 p 元素

<body>
	<div id="exchange"> 
		<input type="button" value="显示/不显示"  @click="exchange">
		<p v-if="bool">显示成功</p>
	</div>
<script>
	new Vue({
		el:'#exchange',	
		data:{
			bool:false
		},
		methods:{
			exchange:function(){
				this.bool=!this.bool;
			}
		},
	})
</script>
</body>

        8.v-show 效果与v-if相同 就不进行代码演示

区别:v-if 删除和添加DOM元素 

        v-show 只是改变了DOM元素的display样式的真和假

显然对以上的区别来说v-if切换的渲染消耗更高，v-show的初始渲染消耗更高.

9.v-bind 用于更改元素的属性名

v-bind 可以缩写为'：'

 如： v-bind:src='url' 可以改写为 :src='url' 

<body>
<div id="app">
    <pre><a v-bind:href="url">百度一下 </a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>
</body>

3.总结

以上就是我对初学vue2.0的一些入门总结

参考了一下博客和资料：Vue新手入门指南（易懂）_liuzhaoh的博客-CSDN博客_vue新手入门 

Vue.js 模板语法 | 菜鸟教程

这篇关于Vue2.0学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航