- 博客(22)
- 收藏
- 关注
原创 vue基础教学(12)
一、substr() 方法语法:substr(start,length)在字符串中抽取从 start 下标开始的指定数目的字符。(1)start,提取字符的位置。如果为负值,则被看作 str.Length + start,其中 str.Length 为字符串的长度(例如,如果 start 为 -3,则被看作 strLength + (-3))。(2)length,可选可不选。选择则输入要提取的字符数,不选就是全部。示例:二、substring()方法语法:str.substring(in
2022-06-09 20:35:47
1080
原创 vue基础教学(10)
随着前端项目越来越大,团队人数越来越多,多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目,小明定义一个aaa.js,小张定义了一个bbb.js。//小明开发var name = '小明'var age = 22function sum(num1, num2) { return num1 + num2}var flag = trueif (flag) { console.log(sum(10, 20));}此时小明的是没有问题的。//小红v
2022-06-09 19:34:30
198
原创 vue基础教学(9)
二、ref的用法1、ref的基本使用2、ref在组件上使用三、is的用法1、is用法一1、is用法二四、插槽vue.js插槽的作用:1、基本使用若组件标签内部嵌套一些其它标签的时候,这些标签无法显示,若要显示的话,在组件内部通过进行接收,slot会将所以标签在同一个位置全部进行接收显示插槽的分类:默认插槽、具名插槽、作用域插槽2、命名插槽(具名插槽)好处:可以增加插槽的灵活性在组件标签内的标签中添加slot属性,属性值为插槽名称:1在组件内部通过name
2022-06-09 19:17:16
718
原创 vue基础教学(8)
一、 sync的使用 vue2的响应式原理原理:通过数据劫持 defineProperty + 发布订阅者模式,当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者,这里在编译模板时就会初始化每一属性的 watcher,在数据发生更新后调用 set 时会通知发布者 notify 通知对应的订阅者做出数据更新,同时将新的数据根性到视图上显示。缺陷:只能够监听初始化实例中的 d
2022-06-09 19:02:40
824
原创 vue基础教学(7)
实例的时候定义属性既可以是一个对象,也可以是一个函数组件中定义属性,只能是一个函数如果为组件直接定义为一个对象则会得到警告信息警告说明:返回的应该是一个函数在每一个组件实例中上面讲到组件必须是一个函数,不知道大家有没有思考过这是为什么呢?在我们定义好一个组件的时候,最终都会通过构成组件实例这里我们模仿组件构造函数,定义属性,采用对象的形式 创建两个组件实例修改组件属性的值,中的值也发生了改变产生这样的原因这是两者共用了同一个内存地址,修改的内容,同样对产生了影响如果我们采用函数
2022-06-01 20:35:54
151
原创 vue基础教学(6)
一、父组件引入子组件1.1.引入组件import shoplist from '../shoplist.vue'1.2.注册组件components: { shoplist }1.3.使用组件<shoplist></shoplist>2.父组件定义数据2.1.定义数组 const shoplistarr = [{ img: "../../static/index/gsdz...
2022-05-31 20:02:28
133
原创 vue基础教学(5)
一、v-for循环<body> <div id="app"> <ul> <!-- <li v-for="item in names">{{item}}</li> <li v-for="(item,index) in names" :key="index">{{item}}--{{index}}</li> --> <li v-for="(item,key,index)
2022-05-25 20:55:16
554
原创 vue基础教学(4)
一、 v-on的基本使用1. v-on 的作用用来给元素注册点击事件的2.v-on 的语法 (1).v_on:事件名 ="事件函数"(2).v-on:click 可以简写 @click(3).v-on:mouseenter 可以简写 @mouseenter3.v-on的注意点 (1).注册事件需要一个事件的函数 (2).创建vue实例的时候,data是用来给vue实例提供的属性(数据),不应该提供方法<body> <div id="a...
2022-05-24 20:40:13
395
原创 vue基础教学(3)
一、计算属性的基本使用<body> <div id="app"> <p>{{firsrName}}-{{lastName}}</p> <p>{{getFullName()}}</p> <p>{{fullName}}</p> </div> <script src="../../vue.js" type="text/javascript" charset="utf
2022-05-24 09:29:28
222
原创 vue基础教学(2)
一、 v-bind的基本使用“v-bind基本使用 有时候属性也不是写死的,也是需要根据某些变量某些数据动态来决定的。 比如动态绑定a元素的href属性 比如动态绑定img元素的src属性 比如动态绑定一些类、样式 这个时候,我们可以使用v-bind指令。 v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值”<body> <!-- v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind:=>: --> <di
2022-05-19 23:53:37
140
原创 vue基础教学(1)
一、vue的基本语法格式:1.在boby中引入vue.js文件;2.代码如下:二、07. Mustache语法代码如下:三、 指令用法01.常用指令v-bind02.常用指令v-if03.常用指令v-for04.常用指令v-on05. v-model 指令06.v-once指令07.v-html08.v-text指令09. v-cloak指令...
2022-05-18 21:02:31
293
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人