Vue.js菜鸟教程自学(一)

Vue.js菜鸟教程自学(一)导入js:一、hellovue<!DOCTYPEhtml><htmllang=”en”><head> <metacharset=”UTF-8″> <title>Document</title><scriptsrc=”https://cdn.staticfile.org/vue/2.2.2/vue….

Vue.js菜鸟教程自学(一)"

导入js:
一、hello vue

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{
  
  { message }}</p>
	</div>
<script>
	new Vue({
		el: '#app',
		 data:{
			 message:'Hello Vue.js!'
		}
	})
</script>
</body>
</html>

二、vue起步
1.每个 Vue 应用都需要通过实例化 Vue 来实现。
2.Vue构造器中有一个el参数来确定元素
用data定义属性,methods定义函数,{
{}}用于输出对象属性和函数返回值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
Vue构造器:
	<div id="vue_det">
		<h1>site:{
  
  { site }}</h1>
		<h1>url:{
  
  { url }}</h1>
		<h1>{
  
  { details() }}</h1>
		<h1>answer:{
  
  { self() }}</h1>
	</div>
Vue事例创建:
	<div class="vue2">
		<h1>site:{
  
  { site2 }}</h1>
		<h1>url:{
  
  { url2 }}</h1>
	</div>
	<script type="text/javascript">
	 var vm = new Vue({
	 	el:'#vue_det',
	 	data:{
	 		site:"菜鸟教程",
	 		url:"www.runoob.com",
	 		ale:"10000"
	 	},
	 	methods:{
	 		details:function(){
	 			return this.site+"技术不是梦"
	 		},
	 		self:function(){
	 			var x=1,y=2;
	 			return x+y;
	 		}
	 	}
	 })
	 var data2 = {site2:"菜鸟教程2",url2:"www2"}
	 var vm2 = new Vue({
	 	el:'.vue2',
	 	data : data2
	 })
	 console.log(vm2.site2===data2.site2);
	 vm2.site2="xxxx";
	</script>
</body>
</html>

3.当一个Vue实例被创建时,他向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这些属性的值发生变化时,html视图将也会产生相应的变化。
4.除了数据属性,Vue实例还提供了一些有用的实例属性和方法。他们的前缀都是$,以便于用户定义的属性分开来。
三、Vue模板语法
1.插值:{
{}}
使用v-html来输出html代码
属性:HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
	.class1{
		background: #444;
		color: #eee;
	}
	.class2{
		background:red;
		color: #000;
	}
</style>
<body>
	<div id="app">
		<label>修改颜色</label><input type="checkbox" v-model="use" id="r1">
		<br><br>
		<div v-bind:class="{'class1':use}">
			<div v-bind:class="{'class2':!use}">
				v-bind:class指令
			</div>
		</div>
	</div>
	<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			use:false
		}
	})
	</script>
</body>
</html>

表达式:Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<style type="text/css">
	#list-1{
		background: red;
	}
</style>
	<div id="app">
		{
  
  {5+5}}<br>
		{
  
  {ok ? 'YES':'NO'}}<br>
		{
  
  {message.split('').reverse().join('')}}
		<div v-bind:id="'list-'+id">{
  
  {message}}</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				ok:true,
				message:'RUNOOB',
				id:1
			}
		})
	</script>
</body>
</html>

2.指令
指令是带有v-前缀的特殊属性。
指令用于在表达式的值改变时,将默写行为应用到DOM上。如下例子:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
	<div id="app">
		<p v-if="seen">现在你看到我了</p>
		<p v-if='!seen'>xxxxxxxx</p>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			seen:true
		}
	})
</script>
</html>

这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
2.参数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
	<div id="app">
		<pre><a v-bind:href="url">菜鸟教程</a></pre>
	</div>
	<script type="text/javascript">
	 new Vue({
	 	el:'#app',
	 	data:{
	 		url:'http://www.runoob.com'
	 	}
	 })
	</script>
</body>
</html>

参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性。
另一个例子是 v-on 指令,它用于监听 DOM 事件:

在这里参数是监听的事件名。
3.修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

““今天的文章Vue.js菜鸟教程自学(一)分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29383.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注