正文

vue知识整理—03-指令3(代码片段)

zhangyan1205  zhangyan1205  2022-12-14  714

关键词：

一：v-on的缩写和事件修饰符

事件修饰符：

. stop 阻止冒泡

. prevent 阻止默认事件

. capture 添加事件侦听器时使用事件捕获模式

. self只当事件在该元素本身（比如不是子元素）触发时触发回调

. once 事件只触发一次

二：v-model和双向数据绑定

v-bind只能实现数据的单向绑定，从 M 到 V ，v-model 可以实现数据的双向绑定，表单元素和 Model中的数据

注意：v-model 只能运用在表单元素中

input（radio ，text ，address ，email 。。。） select checkbox textarea

三：v-bind 属性设置样式

~~~ vue中通过属性绑定（v-bind：）为元素设置 class 样式

---使用 class 样式

1. 直接传递一个数组

2. 数组中使用三元表达式

3. 在数组中使用对象代替三元表达式（数组中嵌套对象）

4. 直接使用对象

~~~ vue中通过属性绑定（v-bind：）为元素绑定 style 行内样式

---使用内联样式

1. 直接在元素上设置 : style

2. 将样式定义到 data 中，直接引用到 : style 中

3. 在 : style 中通过数组，引用多个 data 上的样式对象

四：v-for 的四种使用方式（与key属性）

1. 根据一组数组或对象的选项列表进行渲染。

2. v-for 指令需要使用 item in items 形式的特殊语法，

3. 是源数据数组 /对象

4. 当要渲染相似的标签结构时用v-for

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)

变量数组和对象
数组语法： v-for="(item,i) in list"
对象语法： v-for=“(v,k,i) in obj”
补充：在每一项数据追加一个属性 :key=“唯一标识” 建议如果有ID使用ID没有考虑索引

<body>
        <div id="app">
            <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染
                v-for="元素 in 容器(数组和对象)"
                v-for="数组中的元素 in data中的数组名"
                v-for="对象中的属性值 in data中的对象名"
            -->
            <!-- 数组 -->
            <p v-for="item in list">item</p>
            <hr>
            <p v-for="(item,index) in list">item----index</p>
            <!-- (v,i) in 数组
                v:数组中的每个元素
                i:数组中元素的下标
            -->
            <hr>
            <!-- 对象 -->
            <!-- (v,k,i)in 对象
                v:值
                k:键
                i:对象中每对key-value的索引 从0开始
                注意: v,k,i是参数名,见名知意即可!
            -->
            <p v-for="value in per">value</p>
            <hr>
            <p v-for="(value,key) in per">value----key</p>
            <hr>
            <p v-for="(value,key,i) in per">value----key--i</p>

        </div>
        <script src="./vue.js"></script>
        <script>
            new Vue(
                el: ‘#app‘,
                data: 
                    list: [‘a‘, ‘b‘, ‘c‘],
                    per: 
                        name: ‘老王‘,
                        age: 38,
                        gender: ‘男‘
                    
                ,
                methods: 

                
            )
        </script>
    </body>

vue知识整理—03-指令2

一：属性：el：‘’ //要控制页面上的那个区域data：//存放el中要用到的数据methods：//（对象）定义vue实例中的可用方法二：指令：1.v-cloak解决插值表达式的闪烁问题2.v-text （和插值表达式类似）... 查看详情

vue基础知识整理(代码片段)

实例-vue是由实例组成的根实例组件也是实例以$开头的单词都是代表着vue的实例属性实例方法vue实例中的生命周期钩子8个生命周期函数这几个函数不用放到methods里面计算属性尽量使用计算属性而不是watch！可以配合着计算属性使... 查看详情

vue全部知识点整理(代码片段)

vue是什么以数据驱动为视图的渐进式MVVM框架。渐进式:循序渐进的使用vue,可选择性强,可以只使用vue的小功能,不必完全使用vue。不强制的意思。–mvvm：m:数据模型,v-view视图:数据是双向绑定的,所有数据改变导致视图改变。vue... 查看详情

03-vue指令(代码片段)

...f0c;想持续跟着江哥学习Vue系列一键三连走起！什么是指令？指令就是Vue内部提供的一些自定义属性,这些属性中封装好了Vue内部实现的一些功能，只要使用这些指令就可以使用Vue中实现的这些功能。通过这些指令可以... 查看详情

03-vue指令(代码片段)

vue基础知识(代码片段)

目录vue基础helloVue.模板语法-文本语法文本模板语法-属性使用JavaScript表达式条件指令v-ifv-show指令列表渲染基本用法对象循环输出key事件处理方法事件修饰符侦听器对象变化监听自定义指令vue基础Vue.js的定位是一个渐进式框架前... 查看详情

03-深入了解vue指令(代码片段)

一、指令的深入学习1.1class类切换的对象写法<divid="box"><div:class="classObj"></div></div><script&g 查看详情

03-深入了解vue指令(代码片段)

一、指令的深入学习1.1class类切换的对象写法<divid="box"><div:class="classObj"></div></div><script&g 查看详情

拿来吧你！不想学vue?我不答应！入门vue必备基础-看这里！(代码片段)

...网：https://cn.vuejs.org/目录1.入门必知1.1了解Vue1.2基础知识2.基础必学2.1v-text指令2.2v-html指令2.3v-on指令2.4v-show指令2.5v-if指令2.6v-bind指令2.7v-for指令2.8v-model指令3.案例参考3.1计数器3.2记事本3.3轮播图3.4天气预报查看详情

拿来吧你！不想学vue?我不答应！入门vue必备基础-看这里！(代码片段)

前端芝士树vue.js面试题整理/知识点梳理(代码片段)

【前端芝士树】Vue.js面试题整理MVVM是什么？MVVM是Model-View-ViewModel的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI组件，它负责将数据模型转化成UI展现出来。ViewModel监听模型数据的改变和... 查看详情

vue入门必备知识篇03---生命周期&数据共享(代码片段)

...的生活，美好才会在路上不期而遇❤️【Vue入门必备知识篇03】---生命周期&数据共享一、生命周期&数据共享（1）组件的生命周期1.1生命周期&生命周期函数1.2组件生命周期函数的分类1.3生命周期图示（2&#x... 查看详情

jsp知识点整理(代码片段)

JSP知识点整理概念原理JSP脚本JSP内置对象requestreponseoutout和reponse.getWriter()的区别记住上一次访问时间的案例jsp中使用out.write()和out.print()方法出错爆红解决方法指令注释内置对象MVC开发模式EL表达式概念，作用，语法，... 查看详情

算法设计与分析知识点整理(代码片段)

文章目录前言一、算法的基本概念1.算法的基本特征2.算法设计需要满足的目标3.算法和程序的区别二、时间复杂度计算1.大O表示法2.最坏和平均情况3.根据递归方程求解时间复杂度3.1根据递归树求解3.2根据主方法求解三、六大算... 查看详情

后端学习前端vue框架基础知识(代码片段)

文章目录一、Vue基础语法学习1、Vue语法指令2、Vue实例属性（1）el（2）data（3）methods（4）computed3、事件修饰符4、按键修饰符5、Vue实例的生命周期6、ES6语法的基本使用（1）声明变量使用let... 查看详情

后端学习前端vue框架基础知识(代码片段)

vue基础(代码片段)

知识总结"""1、vue框架的优势2、vue如何在页面中引入 1）通过script标签引入vue.js环境 2）创建vue实例 3）通过el进行挂载3、插值表达式变量以及变量的简单运算4、文本指令 |v-text|v-html|v-once5、方法指令 v-on:事件="变... 查看详情

vue指令03---自动获取焦点（自定义指令）和过滤器的学习(代码片段)

1.1自动获取焦点在自动获取焦点的学习中涉及到了一个钩子函数mounted（），它表示页面一加载进来就执行函数里面的内容，(和window.onload相似，这样有助于理解)，mounted钩子函数的名字不能随便更改，而且不能写在methods... 查看详情