Vue 学习笔记（一）

最新推荐文章于 2024-04-11 03:56:30 发布

Sum_Freda

最新推荐文章于 2024-04-11 03:56:30 发布

阅读量139

点赞数

分类专栏：点点滴滴基础文章标签： Vue基础学习

本文链接：https://blog.csdn.net/wu164/article/details/103724268

版权

点点滴滴基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作为一个前端小白，迫于工作的要求，也不得不学起了前端的内容，希望通过学习vue能够和Django能够搭建一套简单的自动化框架，有兴趣的朋友可以去一起学起来；

1、学习地址：（官网是最全面和根源的学习资料，再者有详细的学习视频，Vue真是良心）

https://cn.vuejs.org/

学习视频地址：

https://learning.dcloud.io/#/?vid=3

跟着视屏小小的撸了一段测试，小记录一下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>皮皮猪的Vue练习001</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<!script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><!/script>
</head>
<body>
 <div id='app'>
	<p>{{a}}</p>
 </div>
  <div id='app2'>
	<p>{{b}}</p>
 </div>
<script>
	var data = { a : 'pipizhu'}
	var vm = new Vue({
	el : "#app",  //错误1，这里曾经漏了一个逗号
	/*
	data : {
		divMsg1 : '我叫皮皮猪，很高兴认识大家！',
		divMsg2 : '我来自江西美丽鄱阳湖之畔的鄱阳县。'
	}*/
	data : data
	});//错误2，这里曾经漏了一个分号
	data.a='wppeng'; // 修改Vue变量a的值
</script>
<script>
	var data = { b : 'pipizhu'}
	var vm = new Vue({
	el : "#app2",  //错误1，这里曾经漏了一个逗号
	data : data
	});//错误2，这里曾经漏了一个分号
	vm.$watch('b',function(newV ,oldV){
		console.log(newV,oldV);
	}); //用于查看变量中变化年后的值（该方法防止在变量变化的中间）
	vm.b='zhanjunxia';// 修改Vue变量b的值
</script>
</body>
</html>

小白就是小白，照着撸都能写错很多，所以说程序还是练出来的：

记录一下错误点：

1、html的基础，<script src="vue.js" type="text/javascript" charset="UTF-8"></script>

写成 <script> src="vue.js" </script> 嘿嘿，勿喷，小白的愚蠢你懂得

----<head> 写成<header> 写requests 写多了，惯性思维

2、js基础：一句话，丢三落四，，日常写js，不该呀，长记性

知识点：

1、Vue() 对象，在head脚本中引入vue.js（两种方式。一是下载到本地vue.js，另外一种就是使用）

<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、只要引入vue后，我们的工程中就已经可以使用vue

接下来就是实例化Vue对象，通过script中实例化vue，然后处理html中的变量信息

html中通过{{valueName}}定义变量

写在最后，加油，皮皮猪

Sum_Freda

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习笔记（一）

作为一个前端小白，迫于工作的要求，也不得不学起了前端的内容，希望通过学习vue能够和Django能够搭建一套简单的自动化框架，有兴趣的朋友可以去一起学起来；1、学习地址：（官网是最全面和根源的学习资料，再者有详细的学习视频，Vue真是良心）https://cn.vuejs.org/学习视频地址：https://learning.dcloud.io/#/?vid=3跟着视屏小小的...
复制链接

扫一扫

专栏目录