Vue2.0

最新推荐文章于 2023-10-23 19:49:24 发布

飞鹰@四海

最新推荐文章于 2023-10-23 19:49:24 发布

阅读量398

点赞数

分类专栏： html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_59534628/article/details/127341689

版权

html 专栏收录该内容

4 篇文章 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
评论
Vue2.0

2.v-model:value可以简写为v-model，因为v-model默认手机的就是value值。举例：v-bind:href="xxx"或简写为 :href="xxx",xxx同样要写js表达式，写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。备注:Vue中有很多指令，且形式都是:v-?2.双向绑定(v-model):数据既可以从data流向页面，也可以从页面流向data。6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
复制链接

扫一扫