网站 建设 现状分析,新冠怎么突然不见了,公司变更地址需要什么资料,app界面设计叫什么文章目录 模板语法数据绑定事件处理计算属性监视属性#xff08;监听器#xff09;条件渲染列表渲染数据监视原理内置指令总结生命周期组件化编程组件使用步骤组件的嵌套this指向单文件组件ref、props 脚手架(Vue CLI)render函数 参考自己的Vue专栏以及Vue官方文档 模板语法 … 文章目录 模板语法数据绑定事件处理计算属性监视属性监听器条件渲染列表渲染数据监视原理内置指令总结生命周期组件化编程组件使用步骤组件的嵌套this指向单文件组件ref、props 脚手架(Vue CLI)render函数 参考自己的Vue专栏以及Vue官方文档 模板语法
Vue 使用一种基于 HTML 的模板语法使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统当应用状态变更时Vue 能够智能地推导出需要重新渲染的组件的最少数量并应用最少的 DOM 操作。
bodydiv idrooth1Hello.{{name}}/h1h3现在的时间是{{new Date().getDate()}}/h3hr//divscriptVue.config.productionTipfalsenew Vue({el:#root,data:{name:CSDN}})/script
/body
/htmlnew了一个Vue实例并将它到绑定到一个容器上它和容器是一一对应的{{}}这个就是Vue里的模板语法可以在html中嵌入自己的表达式类似于react中的{}并且作用域相当于Vue实例的作用域data用来指定该Vue实例维护的数据只要发生变化就会重新渲染模板类似于react中的state或者说useState。这个data对象中的属性是直接挂载在Vue实例对象上的所以调用的时候不需要data.xxxx直接xxx或者this.xxx就可以了data还可以写成函数式 由Vue管理的函数一定不要写箭头函数一旦写了箭头函数this就不再是Vue实例了(成了window)
上面我们使用的就是插值语法它是Vue模板语法的其中一类。 指令语法我们举个例子
bodydiv idrooth1Hello.{{name}}/h1h3现在的时间是{{new Date().getDate()}}/h3a v-bind:hrefurl点击跳转到CSDN/a br!-- 这种是简写形式 --a :hrefurl点击跳转到CSDN/ahr//divscriptVue.config.productionTipfalsenew Vue({el:#root,data:{name:CSDN,url:http://www.csdn.net}})/script
/body
/html数据绑定
Vue有两种数据绑定的方式
单向绑定(v-bind)数据只能从data流向页面。双向绑定(v-model)数据不仅能从data流向页面还可以从页面流向data。
注意 双向绑定一般都应用在表单类元素上如input、select等这些元素都有一个特点就是都有value属性 v-model:value 可以简写为 v-model因为v-model默认收集的就是value值。
!-- 普通写法 --
!-- 单向数据绑定
input typetext v-bind:valuenamebr/
双向数据绑定
input typetext v-model:valuenamebr/
--!-- 简写 --
单向数据绑定input typetext :valuenamebr/
双向数据绑定input typetext v-modelnamebr/
!-- 如下代码是错误的因为v-model只能应用在表单类元素输入类元素上 --
!-- h2 v-model:xname你好啊/h2 --其中双向绑定还有三个常用的修饰符
trim输入首位的空格过滤
账号input typetext v-model.trimuserInfo.account br/br/number将输入的字符串转化为有效数字
年龄input typenumber v-model.numberuserInfo.age br/br/lazy失去焦点再收集数据
textarea v-model.lazyuserInfo.other/textarea br/br/事件处理
我们可以使用 v-on 指令 (简写为 ) 来监听 DOM 事件并在事件触发时执行对应的 JavaScript。用法v-on:clickhandler 或 clickhandler。
事件处理器 (handler) 的值可以是
内联事件处理器事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。【直接写表达式】方法事件处理器一个指向组件上定义的方法的属性名或是路径。【把回调方法写在Vue实例身上】
关于传参
clickhandler直接写方法名会默认传事件对象click“handler(10)”10这个参数也可以使用形参接收这个时候如果想要事件对象需要使用事件对象的占位符
计算属性
模板中的表达式虽然方便但也只能用来做简单的操作。如果在模板中写太多逻辑会让模板变得臃肿难以维护。这个时候我们就可以使用计算属性它可以描述依赖响应式状态的复杂逻辑。
在Vue中属性与计算属性是分开放的data中的放的都是属性而计算属性放在配置项computed中其值也写成一个对象的形式。同时computed中的属性其对应的值也要配置成一个对象其中有getter和setter(setter并不是必须的如果你确定这个属性只会被读取不会被修改那么可以不配置setter)。
当有人读取计算属性时get就会被调用且返回值就作为相应计算属性的值当有人修改计算属性时set就会被调用且返回值就作为修改的计算属性的值
无setter时可以简写
有setter时写成这样
getter的调用时机
初次读取计算属性的时候计算属性所依赖的数据发生变化时
其他时间都是使用的缓存
我们在写setter的时候一般都是对其依赖项进行修改。千万不要对计算属性本身又进行修改否则又会调用setter从而造成无限递归。
监视属性监听器
计算属性允许我们声明性地计算衍生值。然而在有些情况下我们需要在状态变化时执行一些“副作用”例如更改 DOM或是根据异步操作的结果去修改另一处的状态。 watch:{isHot:{immediate:true, //初始化时让handler调用一下 默认falsedeep:true,//深度监视 默认false//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}/* 简写 当你监视属性的配置项中只有handler的时候才可以使用isHot(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)} */} watch里面的被监视属性同样也要写成一个配置对象。其中
handler是一个回调函数当被监视的属性值发生变化的时候就会被调用。它会被传入两个参数一个新值一个旧值。immediate是一个布尔属性默认值是false。当设置为true的时候表示初始化的时候也要调用以下handlerdeep代表深度监视也就是说可以监视多级结构中所有属性的变化例如numbers对象中的a和b 不论是已有的属性还是计算属性都可以被监视 条件渲染 v-if与template的组合使用
想将v-if作用在多个标签上并且不破坏结构的时候使用。 注意
template模板其最大的特点就是不影响结构。在最终渲染的时候会去掉template标签template模板只能和v-if搭配使用不能和v-show搭配使用。
列表渲染 ulli v-for(person,index) in persons :keyperson.id{{person.name}} -- {{person.age}} -- {{index}}/li/ul这里的key是必不可少的他让每一个li都有一个特殊的标识in前面可以接收到两个返回值一个是列表中的元素另一个是列表索引可以作为key。in可以替换为of遍历列表之外我们还可以遍历对象类型、字符串、指定次数如果我们不写keyVue会默认把遍历时候的索引值自动作为key。也就是相当于index作为key那种情况当破环数据原有顺序的情况下key不能为index否则数据紊乱 diff具体比较过程可以参考Vue核心⑧(列表渲染) 数据监视原理 内置指令总结
前面我们已经见过
v-bind : 单向绑定解析表达式, 可简写为 :xxxv-model : 双向数据绑定v-for : 遍历数组/对象/字符串v-on : 绑定事件监听, 可简写为v-if : 条件渲染动态控制节点是否存存在v-else : 条件渲染动态控制节点是否存存在v-show : 条件渲染 (动态控制节点是否展示)
我们再补充几个
v-text 作用向其所在的节点中渲染文本内容。
与插值语法的区别v-text会替换掉节点中的内容{{xx}}则不会。(所以说插值语法更加的灵活)
div v-textstr123/div //实际显示出来是str的内容v-html
作用向指定节点中渲染包含html结构的内容。与插值语法的区别 v-html会替换掉节点中所有的内容{{xx}}则不会。v-html可以识别html结构。 与 v-text指令的区别: v-html支持解析标签v-text只能解析文本 严重注意v-html有安全性问题 在网站上动态渲染任意HTML是非常危险的容易导致XSS攻击。一定要在可信的内容上使用v-html永不要用在用户提交的内容上
v-cloak
本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
div idrooth2 v-cloak{{name}}/h2
/divv-once
v-once所在节点在初次动态渲染后就视为静态内容了以后数据的改变不会引起v-once所在结构的更新可以用于优化性能
v-pre
跳过其所在节点的编译过程可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译 div idrooth2 v-preVue其实很简单/h2h2 当前的n值是:{{n}}/h2button clickn点我n1/button/div生命周期
一张图就可以搞定 比较常用的就两个
mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
组件化编程
传统开发方式
组件化编写的方式
组件使用步骤 Vue中使用组件的三大步骤一、定义组件(创建组件)二、注册组件三、使用组件(写组件标签)一、如何定义一个组件使用Vue.extend(options)创建其中options和new Vue(options)时传入的那个options几乎一样但也有点区别区别如下1.el不要写为什么 ——— 最终所有的组件都要经过一个vm的管理由vm中的el决定服务哪个容器。2.data必须写成函数为什么 ———— 避免组件被复用时数据存在引用关系。备注使用template可以配置组件结构。二、如何注册组件1.局部注册哪里注册哪里用靠new Vue的时候传入components选项2.全局注册一处注册到处用靠Vue.component(组件名,组件)三、编写组件标签school/school组件的命名方式推荐首字母大写
举个例子
bodydiv idrooth2欢迎来到{{msg}}/h2hr!-- 使用组件 --school/schoolhrstudent/student/div/body
script//创建school组件const school Vue.extend({template:divh2学校名称:{{schoolName}}/h2h2学校地址:{{schoolAddress}}/h2/div,data(){return {schoolName:NEFU,schoolAddress:哈尔滨,}}})//创建student组件const student Vue.extend({template:divh2学生名称:{{studentName}}/h2h2学生年纪:{{studentAge}}/h2/div,data(){return {studentName:张三,studentAge:18}}})new Vue({el:#root,//注册组件components:{school:school,student:student},data:{msg:CSDN}})
/script
组件的嵌套
bodydiv idroot/div
/body
script//创建student组件const student Vue.extend({template:divh2学生名称:{{studentName}}/h2h2学生年纪:{{studentAge}}/h2/div,data(){return {studentName:张三,studentAge:18}}})//创建school组件const school Vue.extend({name:NEFU,template:divh2学校名称:{{schoolName}}/h2h2学校地址:{{schoolAddress}}/h2hrstudent/student/div,data(){return {schoolName:NEFU,schoolAddress:哈尔滨,}},components:{student:student}})//创建hello组件const hello Vue.extend({template:divh2欢迎来到{{msg}}/h2hr/div,data(){return {msg:CSDN}}})//创建app组件const app Vue.extend({components:{hello,school},template:divhello/helloschool/school/div})new Vue({el:#root,//注册组件components:{app},template:app/app})
/script我们在开发中会定义这么一种组件这个组件的名字叫app这个组件的作用是管理应用里面所有的组件。也就是说vm只需要管理app这么一个组件。可以说app组件是一人之下万人之上。
this指向 组件配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。 new Vue(options)配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
单文件组件
前面我们的代码中有多个组件我们可以使用ES6的模块化将其改造成单文件组件。这也就意味着我们需要把一个个的组件写成.vue文件。我们知道组件由三个部分组成部分html代码、css、js。在vue文件中为我们提供了三种标签去完成每部分的内容。 比如
templatedivh2 classstu学生名称:{{studentName}}/h2h2学生年纪:{{studentAge}}/h2/div
/templatescriptexport default {name:Student,data(){return {studentName:张三,studentAge:18}}}/scriptstyle.stu{background-color:red;}
/style为什么这里可以不使用Vue.extend方法 ref、props
在组件化的范围内还有两个重要的属性ref、props
ref
Vue 中ref 是一个特殊的属性用于获取组件实例或 DOM 元素的引用。ref 的作用有以下几点
可以在父组件中通过 $refs 访问子组件的实例从而调用子组件的方法或访问子组件的数据。可以在组件中通过 $refs 访问普通的 DOM 元素从而操作元素的属性或样式。
ref 的使用方法如下
在普通的元素上使用 ref用 this.$refs.name 获取到的是 DOM 元素。例如
templatedivinput refinput typetext /button clickfocusInput聚焦/button/div
/templatescript
export default {methods: {focusInput() {// 获取 DOM 元素this.$refs.input.focus();},},
};
/script在子组件上使用 ref用 this.$refs.name 获取到的是组件实例。例如
templatedivchild refchild/childbutton clickshowChildName显示子组件的名字/button/div
/templatescript
import Child from ./Child.vue;
export default {components: {Child,},methods: {showChildName() {// 获取组件实例alert(this.$refs.child.name);},},
};
/script脚手架(Vue CLI)
Vue脚手架又称Vue CLI 官方网址https://cli.vuejs.org/zh/ 第一步仅第一次执行全局安装vue/cli。 npm install -g vue/cli
第二步切换到你要创建项目的目录然后使用命令创建项目 vue create xxxx xxxx处编辑你的项目名称 第三步启动项目 npm run serve
项目结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json包版本控制文件render函数
我们使用的Vue包含两个部分
Vue核心运行时版本模板解析器
Vue 的运行时版本没有模板解析器这意味着它不能在浏览器中直接编译模板而需要通过构建工具预先编译模板为 JavaScript 代码。这会造成以下影响
运行时版本的 Vue 体积更小只包含核心功能适合用于生产环境可以提高性能和加载速度。运行时版本的 Vue 不支持使用 template 选项来定义组件模板只能使用 render 函数来创建虚拟 DOM。运行时版本的 Vue 不支持在页面中使用 Vue 指令比如 v-model、v-for 等因为这些指令需要模板解析器才能转换为 JavaScript 代码。运行时版本的 Vue 不支持使用单文件组件SFC因为 SFC 需要通过 vue-loader 或 vueify 来编译模板。
其中模板解析器这一部分大概占了总文件的三分之一。当我们把代码写完之后使用webpack进行打包那么模板解析器这一部分的代码就显得有些多余
render函数由Vue帮我们调用render函数接收一个函数作为形参这个函数在官方文档中叫做createElement我们可以借助这个函数去渲染具体的内容creatElement函数有两种传参方式 一种标签名和标签内容 另一种是传入组件注意此时不能有引号
