当前位置：首页 > news >正文

课程1-10笔记

news 2025/6/18 17:12:56

1.vue课程简介

1.VUE是：一套用于构建用户界面的渐进式JavaScript框架

渐进式：Vue 可以自底向上逐层的应用

（简单应用：只需要一个轻量小巧的核心库

复杂应用：可以引入各式各样的Vue插件）

vue-cli脚手架,专门做工程化开发

vue-router用于在Vue中实现前端路由

vuex可以保管复杂应用的数据

element-ui是一个组件库

2.vue简介

2.Vue的特点：

（1）采用组件化模式，提高代码复用率，切让代码更好维护

在Vue里面，一个.vue文件就包含了HTML、CSS、javascript三种类型文件的交互

一个Vue文件就是一个组件，可以通过引用一个Vue文件，把html，css\javascript都引用过去

（2）声明式代码，让编码人员无需直接操作DOM，提高开发率

（命令式编码：一步一步来，少了任何一步都不行，就是JS课程里面学的那样，每一步都不能少）

{{p.id}}-{{p.name}} - {{p.age}}

3.使用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点

下面是用新修改（增加了的东西加原来存在的东西）的东西全部替换旧的东西，增加了没有必要的替换（有的东西原来就存在，结果删了又重新都写了一遍）

Vue实现，依旧存在的东西依然保持不变，只增加新增的东西，提高了复用率（在JS课程里面也讲过新增部分和替换全部旧的东西的课程）

vue的实现多了的东西就是虚拟DOM，然后再把虚拟DOM变成真实DOM

3.VUE使用指南

在公司了工作，需要使用脚手架,叫做Vue CLI,不会再使用低级的东西

在Vue.js官网有使用指南

在”学习“里面有两个重要的东西”教程“、”API“

4.搭建Vue开发环境

不推荐新手使用脚手架 VUE CLI

为了使得在线资源加载的更快有时候会做CDN的加速

5.Hello小案例

容器的作用是提供模板和让vue知道值往哪里放

6.hello案例解析（实例和容器之间只能一对一）

（多对一）一个数据只能给一个空里面填

（一对多）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 初识Vue </title>   <script type="text/javascript" src="./js/vue.js"></script> <style> </style> </head> <body>  <div id="root"> <h1>Hello,{{name}},{{address}}</h1> </div>  <script type="text/javascript"> Vue.config.productionTip=false;//阻止Vue在启动时生成生产提示 //创建Vue实例 const x=new Vue({ el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串 //让它选择器让它自己找，这个写法更经典 /*el:document.getElementById('root')//亲自找到一个元素，给它配置到el里面*/ data:{ //data中用于存储数据，数据供el所指定的容器去使用 name:'Linying' } }) new Vue({ el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串 //让它选择器让它自己找，这个写法更经典 /*el:document.getElementById('root')//亲自找到一个元素，给它配置到el里面*/ data:{ //data中用于存储数据，数据供el所指定的容器去使用 address:'Yabing' } }) </script> </body> </html>

只能是一对一的关系

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 初识Vue </title>   <script type="text/javascript" src="./js/vue.js"></script> <style> </style> </head> <body>  <div id="root"> <h1>Hello,{{name}},{{address}}</h1> </div> <div id="root2"> <h1>Hello,{{name}},{{address}}</h1> </div>  <script type="text/javascript"> Vue.config.productionTip=false;//阻止Vue在启动时生成生产提示 //创建Vue实例 const x=new Vue({ el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串 //让它选择器让它自己找，这个写法更经典 /*el:document.getElementById('root')//亲自找到一个元素，给它配置到el里面*/ data:{ //data中用于存储数据，数据供el所指定的容器去使用 name:'Linying', address:'XinZhou' } }) new Vue({ el:'#root2', //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串 //让它选择器让它自己找，这个写法更经典 /*el:document.getElementById('root')//亲自找到一个元素，给它配置到el里面*/ data:{ //data中用于存储数据，数据供el所指定的容器去使用 name:'Yabing', address:'YunCheng' } }) </script> </body> </html>

v-bind:可以简写为:

头标签和尾标签之间夹着的内容就是标签体，红色框里面圈起来的都是标签属性。

标签体中可以用插值语法

7.模板语法{{}}

链接大写和当前时间的时间戳

加了：才会当做JS表达式去执行，不加：就是最传统的字符串

如果有两个name的值对应{{name}}，那么会以后面的那个为准

解决方法：设计为多级的结构

8.数据绑定

v-bind单向数据绑定，v-model双向数据绑定

v-bind最大的特点是数据绑定

只有一个元素有value，v-model才可以工作

普通写法和简写

v-model默认收集的就是value值，所以v-model可以省略value

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 初识Vue </title>   <script type="text/javascript" src="./js/vue.js"></script> <style> </style> </head> <body>  <div id="root">  单项数据绑定:<input type="text" v-bind:value="name"><br/> 双向数据绑定:<input type="text" v-model:value="name"><br/> <h2 v-bind:x="v-bind">你好啊</h2>  </div> </body>  <script type="text/javascript"> Vue.config.productionTip=false;//阻止Vue在启动时生成生产提示 //创建Vue实例 new Vue({ el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串 //让它选择器让它自己找，这个写法更经典 /*el:document.getElementById('root')//亲自找到一个元素，给它配置到el里面*/ data:{ //data中用于存储数据，数据供el所指定的容器去使用 name:'尚硅谷' } }) </script> </html>

9.el和data的两种写法

value实例对象

所有带$符号的是给程序员用的，所有不带$符号的都不是给程序员用的

v是实例，Vue是实例缔造者

总结：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 初识Vue </title>   <script type="text/javascript" src="./js/vue.js"></script> <style> </style> </head> <body>  <div id="root"> <h1>你好，{{name}}</h1> </div> </body>  <script type="text/javascript"> Vue.config.productionTip=false;//阻止Vue在启动时生成生产提示 //创建Vue实例 const v=new Vue({ /* el:'#root',*/ //data的第一种写法：对象式 data:{ name:'尚硅谷' } //data的第二种写法；函数式 /* data的属性是一个函数，是Vue帮调用的 data:function(){ console.log('@@@',this) //此处的this是Vue实例对象 return{ name:'尚硅谷' } } */ /*简写为: data(){ console.log('@@@',this) //此处的this是Vue实例对象 return{ name:'尚硅谷' } } */ }) //el的两种写法 //不用el，用$也可以指定容器 /*两种方式都可以指定容器，但是第二种灵活一点儿*/ console.log(v) v.$mount('#root')//$mount 挂载 /*setTimeout(()=>{ v.$mount('root') },1000); 意思是等一秒才会执行 */ </script> </html>