JS-Vue(03-2021-12-08)

最新推荐文章于 2024-08-08 15:28:54 发布

weixin_42569047

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量363

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42569047/article/details/121798506

版权

Vue

//1.轻量级mvvm框架，双向绑定，数据动态更新(MVVM:Model(数据),View(试图),ViewModel),
//MVVM:好处：事先松耦合，分层的架构思想
//2.一个渐进式框架，核心思想：数据驱动，组件化前端开发
//3.简化dom操作，vue操作的是数据
//Vue用于构建用户界面的渐进式SPA，单一页面框架，
//特点：
// 1.综合了HTML,CSS,JS技术
// 2.渐进式框架：按需配置Vue.js+
// 3.优化了DOM操作网页元素的方式
使用步骤：
1.在JS中引入Vue文件
在head中的script加入src
在这里插入图片描述

2.获取Vue准备的数据
在这里插入图片描述

3.准备数据
//data不需要的时候，可以不写
//methods没有使用函数的时候，可以不写
//el:不能省略，不然无法解析
在这里插入图片描述
示例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id ="app">
			算数运算符：{{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
			三元运算符：{{age >19 ? "成年人" : "未成年"}}
			<div> 字符串的内容是{{str}}</div>
			<div> 字符串的长度是{{str.length}}</div>
			<div> 字符串拼接后是{{str.concat("  hello")}}</div>
			<div> 字符串截取后是{{str.substr(1,2)}}</div>
			<div>调用函数1(无参)：{{show()}}</div>
			<div>调用函数2(有参，有返回值)：{{add(1,2)}}</div>
		</div>
		<script>
			//data不需要的时候，可以不写
			//methods没有使用函数的时候，可以不写
			//el:不能省略，不然无法解析
			let vm = new Vue({
				el:"#app",
				data :{
					age:34,
					str:"asdfghjkl"
				},
				methods:{
					show:function(){
						console.log("---函数调用---");
					},
					sout:function(color){
						console.log(color);
					},
					add:function(x,y){
						return x+y;
					}
				}
			});
		</script>
	</body>
</html>

示例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id ="app">
			<h1> vue解析简单的数据:{{str}} {{num}}</h1>
			<h1>vue解析对象的数据:{{p.name}} {{p.age}}{{p.show()}}</h1>
			<h1>vue解析数组的数据：{{hobby[0]}}  {{hobby[1]}}</h1>  
			 <h1>vue解析数组中对象的数据：{{arrays[0].name}}  {{arrays[1   ].name}}</h1>  
		</div>
		<script>
			let vm= new Vue({
				el:"#app",
				data:{
					str:"hello vue",
					num:10,
					p:{//vue定义对象
						name:"lisa",
						age:20,
						show:function(){
							console.log(100);
						}
					},
					hobby:["足球","篮球"],
					arrays:[
						{name:"张三",	age:18},
						{name:"王五",age:30}
					]
				}
			})
		</script>
	</body>
</html>

data的另外两种数据格式：
第2种：

new Vue({
				el:"#app",
				//第二种数据格式
				data:function(){
					return{
						person:{
							name:"张三",
							age:20
						},
						hobby:["足球","篮球"]
					}
				},
				})

第3种：

new Vue({	
				el:"#app",
				data(){
				return{
						person:{
							name:"李四",
							age:30
						},
						hobby:["唱歌","跳舞"]
					}
				 }
			})

weixin_42569047

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-Vue(03-2021-12-08)

Vue//1.轻量级mvvm框架，双向绑定，数据动态更新(MVVM:Model(数据),View(试图),ViewModel),//MVVM:好处：事先松耦合，分层的架构思想//2.一个渐进式框架，核心思想：数据驱动，组件化前端开发//3.简化dom操作，vue操作的是数据//Vue用于构建用户界面的渐进式SPA，单一页面框架，//特点：// 1.综合了HTML,CSS,JS技术// 2.渐进式框架：按需配置Vue.js+// 3.优化了DOM操作网页元素的方式使用步骤
复制链接

扫一扫