Vue2.0

 初始vue:

初始vue
        1.想让vue工作就必须创建一个vue实例,且要传入一个配置对象
        2.root容器里的代码依然符合HTML规范,只是混入了vue语法
        3.root容器里的代码被称为【vue模板】
        4.vue实例和容器是一一对应的
        5.真实开发中只有一个vue实例,并且会配合组建一起使用
        6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
        7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
        注意区分:js表达式 和 js代码(语句)
            1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
                (1).a
                (2).a+b
                (3).demo(1)
                (4).x===y?'a':'b'
                
                2.js代码(语句)
                (1).if(){}
                (2).for(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<h1>hello,{{name}}.{{name}}</h1>
		</div>
		<div id="root">
			<h1>hello,{{name}}</h1>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false  //阻止vue在启动时生成提示
		new Vue({
			el:'#root',//el指定vue实例为那个容器服务
			data:{		//data用来存储数据,
				name:"张三"
			}
		})
		</script>
	</body>
</html>

Vue模板语法: 

url.toUpperCase()  大写

v-bind  数据绑定

    Vue模板语法有两大类:
            1.插值语法:
                功能:用于解析标签内容
                写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
            2.指令语法
                功能:用于解析标签(包括:标签属性、标签内容、绑定事件......)
                举例:v-bind:href="xxx"或 简写为 :href="xxx",xxx同样要写js表达式,
                        且可以读取到data中的所有属性,
                备注:Vue中有很多指令,且形式都是:v-???,此处我们拿v-bind举例。

<body>
		<div id="root">
			<h1>插值语法</h1>
			<h3>您好,{{name}}</h3>
			<hr>
			<h1>指令语法</h1>
			<a v-bind:href="url">点我去尚硅谷学习1</a>
			<a :href="school.url">点我去尚硅谷学习2</a>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#root',
				data:{
					name:'张三',
					url:'http://www.atguigu.com',
					school:{
						url:'http://www.atguigu.com'
					}
				}
			})
		</script>
	</body>

 数据绑定:

vue中有两种数据绑定方式:
            1.单向绑定(v-bind):数据只能从data流向页面
            2.双向绑定(v-model):数据既可以从data流向页面,也可以从页面流向data
                备注:
                    1.双向绑定一般都用在表单类元素上(如 input、select等)
                    2.v-model:value可以简写为v-model,因为v-model默认手机的就是value值

<div id='root'>
			单项数据绑定:<input type="text" v-bind:value="name"><br>
			双向数据绑定:<input type="text" v-model:value="name"><br>
			<!--简写-->
			单项数据绑定:<input type="text" :value="name"><br>
			双向数据绑定:<input type="text" v-model="name"><br>
			<!--如下代码是错误的,因为v-model:只能用在表单类元素上-->
			<h2 v-model:x="name">你好</h2>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false  //阻止vue在启动时生成提示
			new Vue({
				el:'#root',
				data:{
					name:'张三'
				}
			})	
		</script>

el与data的两种写法:

 data与el两种写法:
            1.el有两种写法
                (1)new vue时配置el属性
                (2)先创建vue实例,在通过vm.$mount('#root')指定el值
            2.data有两种写法
                (1)对象式
                (2)函数式
                如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
            3.一个重要的原则:
                由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<!-- 
		 data与el两种写法:
			1.el有两种写法
				(1)new vue时配置el属性
				(2)先创建vue实例,在通过vm.$mount('#root')指定el值
			2.data有两种写法
				(1)对象式
				(2)函数式
		        如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
			3.一个重要的原则:
				由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
		                    
		 -->
	</head>
	<body>
		<div id="root">
			<h1 >你好,{{name}}</h1>
		</div>
		
		
		<script type="text/javascript">
			const v=new Vue({
				//el:'#root',  第一种写法
				
				// data:{       				//第一种写法
				// 	name:'张三',
				// 	url:'http://www.atguigu.com',
				// 	school:{
				// 		url:'http://www.atguigu.com'
				// 	}
				// },
			data:function(){				//第二种写法  data () {return{}} 简写
				return{
						name:'张三',
				}
			}
			})
			console.log(v)
			setTimeout(function() {  //计时器,让他3秒后出来
				v.$mount('#root') //第二种写法
			}, 3000);
			
		</script>
		
	</body>
</html>

 MVVM模型:

 MVVM模型
            1.M: 模型(Model) : data中的数据
            2.V: 视图(view) :模板代码
            3.VM: 视图模型(ViewModel): Vue实例
        观察发现:
            1.data中所有的属性,最后都出现在了vm身上。
            2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		
		<!-- 
		 MVVM模型
			1.M: 模型(Model) : data中的数据
			2.V: 视图(view) :模板代码
			3.VM: 视图模型(ViewModel): Vue实例
		观察发现:
			1.data中所有的属性,最后都出现在了vm身上。
			2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用
		 -->
	</head>
	<body>
		<div id="root">
			<h1>学校姓名:{{name}}</h1>
				<h1>学校地址:{{address}}</h1>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip=false  //阻止vue在启动时生成提示
			 
			 const vm=new Vue({
				 
				 data(){
					return{
						name:'陕西机电',
						address:'宝鸡'
					}
					 
				 }
			 })
			 vm.$mount('#root')
		</script>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞鹰@四海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值