初识Vue原创

二丫讲梵 2022-09-23 09:27:43 阅读数:317

原创vue腾讯云初识technology-development

# 前言

这次契机难得,终于能有一个整块儿的时间学习一下 Vue,而今学习基本到一个段落,过程中紧紧跟随做了笔记,不敢怠慢,整理到这里。这个整理更多是给自己的,便于以后翻看查阅!

特别鸣谢:尚硅谷 张天禹 老师的 尚硅谷 Vue2.0+Vue3.0 全套教程丨 vuejs 从入门到精通 (opens new window)

这个课程真的是说多少夸奖的话都是不够的,视频中弹幕也有很多很多感恩的话,张老师的课程由浅入深,细致入微,引人入胜,即便是一个外行人,也能很快就会被课程吸引,让我在学习过程中不至于枯燥,这真的是一个宝藏老师,的确 YYDS。

笔记里边大部分都是代码,以及一些简短的记录,这里就也采用代码与说明的方式进行记录。

学习过程中的代码,统一发布在: https://github.com/eryajf/vue-learn-code (opens new window)

# 初相识

#代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识Vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- toUpperCase: 转为大写 -->
<h1>Hello {{name.toUpperCase()}},{{age}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 禁用提示
// 创建Vue实例
new Vue({
el: "#root", // el 用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data:{ // 用于存储数据,数据供el指定的容器使用,值先写死成一个对象
name:'eryajf',
age:'3',
}
})
</script>
</body>
</html>

#笔记

初始 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 代码(语句)
  8. 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
  9. a
  10. a+b
  11. demo(1)
  12. x === y ? 'a' : 'b'
  13. js 代码
  14. if(){}
  15. for(){}
版权声明:本文为[二丫讲梵]所创,转载请带上原文链接,感谢。 https://cloud.tencent.com/developer/article/2118797