欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

荐 Vue 入门到精通(持续更新)

程序员文章站 2022-08-09 15:42:23
第一部分:Vue入门什么是Vue:是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。第一步:引入第二步:利用插入表达式的形式,进行渲染

第一部分:Vue入门

                                    VUE学习思路

荐
                                                        Vue 入门到精通(持续更新)
什么是Vue:
是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

			第一步:引入
<script src="./js/vue.js"></script>
			第二步:利用插入表达式的形式,进行渲染
<div id="app">
         {{msg}}   //1.可以将数据填充到HTML标签中,  2. 支持基本的计算操作  //
</div>
			第三步:创建实例对象
var vm = new Vue({
     el:'#app',      el:挂载元素,值可以是CSS选择器(一般为ID选择器) 
     data:{            data:数据模型  (值是一个对象)
    msg:'你好,第一个VUE'
   }
})

前端渲染: 把数据填充到HTML标签之中
荐
                                                        Vue 入门到精通(持续更新)
渲染的方式: 原生JS拼接字符串
缺点:不同的开发人员的编写代码风格不同,后期维护性困难
使用模板引擎:
缺点:缺少专门的事件机制

使用框架的模板语法: 便于后期的维护


第二部分:模板语法

模板语法的分类:
1-插值表达式 2-指令 3-事件绑定 4-属性绑定 5-样式绑定 6-分支循环结构


1-插值表达式:
{{msg}}
荐
                                                        Vue 入门到精通(持续更新)


2-指令:

		什么是指令:指令的本质就是自定义属性 指令的格式:以v-XX 开始(比如:v-cloak)

1-v-cloak
2-v-html
3-v-text
4-v-bind
5-v-show
6-v-model
7-v-for
8-v-if v-else-if v-else
9-v-pre

一: v-clock 解决插值表达式闪动的问题
解决原理:先隐藏,替换好值之后再显示最终的值
荐
                                                        Vue 入门到精通(持续更新)


二:数据绑定指令

1 v-text 填充纯文本 比插值表达式更加的简洁(没有了闪动的问题)

2 v-html 填充html片段 存在安全问题 本网站内数据可以使用,第三方的数据不可以用,容易遭到XSS攻击

3 v-pre 填充原始信息 显示原始信息 跳过编译过程


三:响应式数据

如何理解响应式:

1.h5中的响应式   (屏幕尺寸的变化导致样式的变化)
2.数据的响应式   (数据的变化导致页面内容的变化)

什么是数据绑定: 将数据填充到标签中
v-once 显示内容之后不再具备响应式功能【显示一次之后不用再修改,可以提高性能】


四:双向数据绑定

v-model: 修改数据或者修改页面内容都会同步的修改

v-model的底层原理就是 v-bind和v-model的共同使用
荐
                                                        Vue 入门到精通(持续更新)
荐
                                                        Vue 入门到精通(持续更新)

荐
                                                        Vue 入门到精通(持续更新)


五:事件绑定

v-on:click=‘XX’ 事件绑定 简写形式 @click=‘XX’
事件函数的调用方式:

  <button @click="btnHandle">方法里的+1</button>
  <button @click="btnHandle( )">方法里的+1</button>

事件函数的参数传递:

  • 注意
    • 只要是事件发生,就会有事件对象event/e
    • event.target:获取到当前的事件源对象,发生事件的元素对象
  • 总结
    • 不加小括号:如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
    • 加小括号:如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event

普通参数和事件对象
<button @click="btnHandle(’参数‘ , $event)">方法里的+1</button>
$event事件对象
event.target.tagName(触发事件的标签名称)
event.target.innerHTML(触发事件的内容)

	参数的传递:
1如果事件直接绑定函数的名称,那么默认会传递事件对象作为事件函数的第一个参数
2如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且对象的名称必须是$event

六:事件修饰符

事件修饰符
.stop 阻止冒泡 .prevent阻止默认行为

官网:修饰符
荐
                                                        Vue 入门到精通(持续更新)

按键修饰符
keyup.enter 回车键 keyup.delete删除键

自定义按键修饰符
vue.config.keyCodes.f1=112


六:属性绑定

属性绑定,就是将元素的属性值与数据绑定起来
v-bind 指令 进行属性的绑定

  • 绑定之后,数据发生变化之后,元素的属性值跟着一起变化
  • 想要修改属性值,那么就修改数据属性即可
  • 想要获取属性值,那么就直接获取数据属性即可
  • 元素的属性值,很多时候都是动态的,要根据后台返回的数据来变化的,这时候就需要使用属性绑定

七:样式绑定

	对象语法:<div v-bind:class="{active: isActive,error: isError}">

	数组语法:<div v-bind:class='[activeClass, errorClass]'>测试样式</div>

样式绑定的细节用法:
1-对象绑定和数组绑定可以结合使用

 答:<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>

2-class绑定的值可以简化操作?
答:可以把多个类名抽离出来到data中,变成一个数组变量或者式对象变量

3-默认的class如何处理?
答:默认的class会被保留


八:分支结构
v-if v-else-if v-else 进行判断,是否显示
v-show 进行判断,是否显示


v-if和v-show的区别: