上海企业网站制作电话,免费,静态网站建设要学什么,wordpress 间距目录
一、了解 Vue
#xff08;一#xff09;介绍
#xff08;二#xff09;Vue 特点
#xff08;三#xff09;Vue 网站
1.学习#xff1a;
2.生态系统#xff1a;
3.团队
二、搭建 Vue 开发环境
#xff08;一#xff09;安装与引入 Vue
1.直接引入
2.N…目录
一、了解 Vue
一介绍
二Vue 特点
三Vue 网站
1.学习
2.生态系统
3.团队
二、搭建 Vue 开发环境
一安装与引入 Vue
1.直接引入
2.NPM 安装
二简单案例
小知识
1.实现过程
容器设置
Vue 实例设置
2.实现结果
3.注意事项
三Vue 插件
三、Vue 模板语法
一插值语法 {{ }}
二指令语法 v-
四、Vue 数据绑定
一单向数据绑定
二双向数据绑定
五、el 和 data 的两种写法
一查看实例
二el
1.第一种写法直接写
2.第一种写法原型对象方法
三data
1.第一种写法对象式
2.第一种写法函数式
六、 理解 MVVM 模型
一与 Vue 的联系
二两条流程
三注意
七、 Vue 数据代理
一Object.defineproperty 方法
1.语法
2.实例 二数据代理应用 一、了解 Vue
一介绍
一套用于 构建用户界面 的渐进式 JavaScript 框架
构建用户界面把手中的数据变成用户看见的界面
渐进式自底向上逐层的应用就是如果是简单的程序 只需要一个轻量小型的核心库复杂应用需要引入各式各样的 Vue 插件。所以就是由小型的库逐步递进到复杂的库看程序的复杂程度 逐层递进。
二Vue 特点
1.采用组件化 提高代码复用率 代码好维护
组件化把网页中有特定功能的一部分比如说任务栏的html css js 文件封装到一个全新的文件类型 .vue 里面去形成一个组件
复用率如果有别人也想设计一个类似的任务栏就可以使用这个 .vue 文件提高复用率
2.声明式编码编码人员无需直接操作 DOM 提高开发效率
比如 有一个对象里面有几个属性我们想挨个属性输出
我们用之前循环输出结果的那种语句叫命令式编码必须一步一步进行
声明式相对很简洁 3.使用虚拟 DOM 优秀的Diff 算法 尽量复用 DOM节点
就是 原生 DOM 如果在对象中又增加了一个属性原本的三个数据就会被四个数据替换然后再重新渲染到网页上有点麻烦 虚拟 DOM 又在数据和真实 DOM 之间增加了一个虚拟 DOM它会缓存数据如果对象中的数据发生了变化有了这个就不是像之前一样又重新赋值一遍虚拟 DOM 会将新数据 和原本的数据进行 Diff 比较 如果有之前的数据就保留有新的变化就直接在原来的基础上改变数据对过程进行了优化。 三Vue 网站
中文 Vue 官网 cn.vuejs.org
1.学习
vuejs 中学习下面的教程 和 API 是最重要的两个部分还有其它的
教程 学习 Vue 缩进代表层级红色感叹号表示注意项
APIVue 的字典不会的方法就查看 API
风格指南就是代码风格 能合理优雅一点 尽量符合 Vue 代码风格
示例把左边的栏往右拖一下 有源代码
Cookbook技巧 进阶
2.生态系统
工具和核心插件很重要暂时用不到
3.团队
Awesome Vue 是作者推荐的一些好的 Vue 周边库往下滑
浏览和 Vue 相关的包和前一个差不多 好看一点
二、搭建 Vue 开发环境
一安装与引入 Vue
1.直接引入
使用script
开发版本有详细的警告 vue.js开发时使用有利于改错
生产版本删除了所有警告 vue.min.js (经过了压缩)产品上线前使用缩小代码大小
我们下载开发版开发版引入如下代码全局多了一个 vue 函数
script typetext/javascript src../js/vue.js/script运行一下看一下控制台 有两个警告 引入成功 但是提示得安装 Vue 应用工具 在谷歌浏览器中 引入 Vue 应用插件
然后插件中点击详情 然后允许访问
然后刷新界面发现第一个警告消失
vue.config 是一个对象 包含 Vue 的全局配置 可以在应用启动之前 修改下列 property
API 全局变量里面 有属性介绍自己看看 在 html 里面加一句 Vue.config.productionTip false 能取消第二个警告
script typetext/javascriptVue.config.productionTip false/script
2.NPM 安装
需要配合脚手架 所以先学习前面的 script 引入访问文件地址
二简单案例
利用 Vue 的相关知识写一个可以变化文字内容 文字片段
小知识
在 vscode 使用 Live Srever 插件打开当前页面会在本机5500 的端口开一台小服务器把整个工程中的文件文件夹作为这台服务器中的根资源使用 1.实现过程
容器设置
root 容器中的代码被称为 Vue 模板
首先外面得有一个容器然后创建 Vue 实例传入配置对象
容器中首先有 插值语法就是和 Vue 相关的变化的量
{{用两个大括号里面放变化的变量}} 然后去 vue 中设置 变量具体的值 div idrooth1hello {{name}}/h1/div
Vue 实例设置
括号里面大括号一般是配置对象{ }
常见的参数
el指定当前Vue 实例为哪个容器服务 里面是 css 选择器字符串形式.name/#name
data传入数据 最好是数组类型
new Vue({el: #root,data: {name: 一个人}
2.实现结果
Vue 实例解析 容器 看是否有变化的值 name检查到具体插值语法最后 root 容器中的内容被替换成 Vue 模板内容
bodydiv idrooth1hello {{name}}/h1/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el: #root,data: {name: 一个人}})/script
/body
3.注意事项
多个相同类名的容器 不能都被 Vue 实例操作只控制第一个同样多个实例对同一个容器操作也不行容器、实例是一对一的。但是也不能一个实例里面太多内容 可以往下分发内容 就是我们要使用的组件
{{ }} 里面究竟能放什么内容 js 表达式 就是有具体的 返回值 的语句有变化的值改变 Vue 实例的 data 里面的的值 相应页面用到该值的地方也会发生改变
真实开发中只有一个 Vue 实例和组件一块儿使用
三Vue 插件
使用我们导入的 Vue 插件
观察组件结构 有点像 DOM 结构
Root 不是容器 它是根 就是我们的 Vue 实例 以后里面有 儿子 就是组件
可以改变下面 Root 的内容来测试 三、Vue 模板语法
root 容器中的代码被称为 Vue 模板
一插值语法 {{ }}
就是把指定的值放到指定的地方插值常用于标签体内部就是123里面的内容
bodydiv idrooth1插值语法/h1h3你好{{name}}/h3/divscript typetext/javascriptnew Vue({el: #root,data: {name: 一个人}})/script
/body
二指令语法 v-
指令语法常用于 标签属性中 就是123 里面的属性
v 是使用 Vue 的意思
v-bind 动态的绑定值
v-bind 能简写为 只有 v-bind 后面写的还是 js 表达式
v-bind:url 会把里面的 url 当成表达式使用 就是从 url 变成 url ... 的形式就能把 Vue 实例中的 url 数据读出来了 不能用{{url}}
加上就能执行后面的语句否则就是普通的字符串形式
bodydiv idrooth1指令语法/h1a v-bind:hrefurl一个链接/a/divscript typetext/javascriptnew Vue({el: #root,data: {name: 一个人,url:http://www.baidu.com}})/script
/body
如果 Vue实例中的属性名字冲突 可以设置多个层级再用别的对象包括一下
四、Vue 数据绑定
v-bind 就是一种数据绑定 href 的内容就是 url 的内容
一单向数据绑定
v-bind 或
文本框输入改变了 value 但是不改变 Vue 实例中 value 属性
就是改变 Vue 实例中的数据时对应容器中用到该数据的地方也会相应发生变化但是如果对容器中可变化的数据进行变化 Vue 实例中的数据不会发生变化因此是单向的。
bodydiv idroot单向数据绑定input typetext :valuename/divscript typetext/javascriptnew Vue({el: #root,data: {name: 一个人}})/script
/body二双向数据绑定
v-model只能用在 表单类型元素中 就是有 value 的标签
v-model:value 可以简写为 v-model
文本框输入改变了 value 也改变 Vue 实例中 value 属性
就是改变 Vue 实例中的数据时对应容器中用到该数据的地方会相应发生变化对容器中可变化的数据进行变化 Vue 实例中的数据也会发生变化因此是双向的。
五、el 和 data 的两种写法
一查看实例
查看 Vue 实例对象 发现以 $ 开头的属性和方法 都是给我们程序员用的在下面的截图中不带的就不是给我们用的是底层用的我们先不用这些 我们现在用的方法在这里在原型对象中 就是 js 高级中学的原型对象 实例都能看见原型对象中的方法 二el
1.第一种写法直接写
直接写在配置对象里面
特点设置完立即和容器相连容器内部立即变成 Vue 实例中的内容 new Vue({el: #root,data: {name: 一个人}})
2.第一种写法原型对象方法
利用原型对象中的方法 $mount(css中的标签名) mount 是挂载的意思
特点可以随时和容器相连可以设置延时几秒后再和容器相连然后 容器显示内容 const v new Vue({data: {name: 一个人}})console.log(v)v.$mount(#root)
三data
1.第一种写法对象式
普通写法 不建议使用 data: {name: 一个人}
2.第一种写法函数式
尽量用函数式后面组件必须用函数式对象式会报错
是 Vue实例对象调用这个函数 所以 this 指向 Vue 实例对象
注意函数不能用箭头函数写不然会让 this 指向外层的 window因为箭头函数没有 thisthis就层层外指 data:function(){return{name: 一个人}}
六、 理解 MVVM 模型
一与 Vue 的联系
Vue 作者参考 MVVM 模型设计出了 Vue 模型
M模型 model 对应 data 中的数据
V视图 view 对应 DOM 就是对应 Vue 中的模板
VM视图模型 ViewModel 对应 Vue 的实例对象
二两条流程
数据通过数据绑定 将数据显示到页面上
数据通过 DOM 监听页面事件观测页面中数据的变化从而 对 Vue 对象中的数据进行更改
三注意
在文档中经常用 vm 这个变量名来 代表 Vue 实例
data 中的属性都出现在 vm 身上
vm 身上所有的属性 和 vm 原型上所有的属性都能在 Vue 模板中直接使用 七、 Vue 数据代理
一Object.defineproperty 方法
给对象添加属性的方法 es6 中的新语法
1.语法
Object.defineproperty 有三个参数
第一参数 对象名
第二参数 添加的属性名
第三参数 配置项 里面能加很多配置
最常用 value 就是给属性名添加属性值
2.实例
下面给 person 添加了一个 sex 属性 值是男
但是在浏览器中查看对象中的属性 发现 新添加的 sex 属性颜色比其他的淡
这意味着它不可枚举就是不能遍历
用Object.keys(person) 或 forkey in person检测一下发现没有 sex 属性
let person {name: 张三,age: 18}Object.defineProperty(person, sex, {value: 男})
可以通过添加一个 enumerabletrue 来解除这种现象 默认是false
能添加的属性如下
value属性值
enumerabletrue 属性能枚举
writabletrue 属性就能修改了
configurabletrue 属性可以删除
get(){
return hello
} :当有人读取 person 中 sex 的值时 get 就会被调用 返回值就是 sex 的值这整个函数也被称为getter设置完这个函数 sex 属性后面的值就会变成省略号因为它是随用随调用不调用时不显示调用就返回 return 的值 给 sex 属性
同理 set(value){
console.log(有人修改sex 值 值是value)
number value
}检测是否有人修改 value 值 整个函数也叫 setter 值
前四种属性设置 Object.defineProperty(person, sex, {value: 男,enumerable: true,writable: true,configurable:true}) get 方法设置 script typetext/javascriptlet person {name: 张三,age: 18}let number 13Object.defineProperty(person, sex, {get() {return number}})console.log(person)/script
set 方法设置 Object.defineProperty(person, sex, {get: function () {return number},set(value) {number value}}) 二数据代理应用
通过一个对象代理另一个对象中属性的操作读和写就叫数据代理
下面可以通过 obj1.x 300 来改变 obj 中 x 的值也变成 300 Object.defineProperty(obj1, x, {get() {return obj.x},set(value) {obj.x value}})
我们检测一下 vm 中的属性发现里面多了两个属性一个是 name address 我们发现浏览器中查看这两个属性他们后面的值是省略号 这证明 他们使用了数据代理通过调用我们设置的data.name 和
data.address 来查看和修改 name address 的值分别利用了getter 和 setter 方法
bodydiv idrooth1学校名称{{name}}/h1h1学校地址{{address}}/h1/divscript typetext/javascriptconst vm new Vue({el:#root,data:{name: 普通学校,address: 地上}})/script
/body
查看 vm 对象
初始我们定义的 data 和 _data 是一个东西我们改变 vm 中 name address 属性的值 data.name data.address 的值也会变化. 但是我们查看不到 代码只是最开始的代码
_data.name 和 name 本质是一个东西 但是有了数据代理 我们能简化代码写个 name 就行
原理通过Object.defineProperty() 把 data 对象中所有属性添加到 vm 上
为每一个添加到 vm 的属性添加一个 getter 和 setter
在 getter setter 内部去操作data 中对应的属性
