当前位置：首页 > Web前端 > CSS

Vue学习笔记(一)

时间：2023-03-31 00:51:52 CSS

1.Vue.js介绍Vue.js也叫Vue。它的发音与view相似，但错误的发音是v-u-e。它是开源的，由中国人YouYuxi维护。Vue具有以下特点：是一个构建用户界面的框架，是一个轻量级的MVVM（Model-View-ViewModel）框架，类似于angular和react。数据驱动+组件化前端开发（核心思想）通过简单的APIStyle数据绑定实现响应，组合视图组件更易用、更紧凑。参考：官网文档2.第一个vue程序{{msg}}//字符串模板

//引入vue文件以上是一个非常简单的vue程序。绑定元素在这里不仅可以使用id选择器，我们还可以使用class选择器或者label选择器。但是vue2.0不允许把vue实例挂在html或者body元素上。3.常用指令指令用于扩展HTML功能。Vue有很多内置指令。1、v-model实现双向数据绑定，实时监控数据变化，一般用于表单。

{{content}}

这里使用v-model命令将输入??框的值和内容结合起来在vue实例中绑定。此后，任一值的任何变化都会导致另一个值也随之变化。2、v-for用于遍历数组、对象等。

//遍历数组{{item}}

//遍历对象{{item}}

//键值循环，数组同样适用，注意key在{{key}}----{{value}}后面

3.v-on用于绑定事件，用法：v-on:event="function"。示例：点击事件

点击显示
{{msg}}

this指向当前的vue实例，从中可以获取该实例的其他属性。除了点击事件，还有很多其他的事件，具体请参考官网API。4、v-show用于显示或隐藏元素，v-show是通过display实现的。v-show的值为true时显示，为false时隐藏。

隐藏4.活动开始前，我说了一些关于活动的说明。在这里，我将了解有关该事件的更多信息。1.事件缩写前的事件是这样写的：v-on:click="showHello()"，Vue提供了一种简写方法：@click="showHello()"2.事件对象$event我们可以通过event对象获取事件相关信息，如事件来源、事件类型、偏移量等。下面的例子通过事件对象获取按钮的值：点击显示按钮的值
{{msg}}3.事件冒泡和事件默认行为这里要讨论一下防止事件冒泡和默认行为，而原生js块事件冒泡必须先获取事件对象，然后调用事件对象的stopPropagation方法。在vue中，不需要依赖事件对象，只需要调用相应的事件修饰符即可stop:@click.stop="print()"阻止事件的默认行为与阻止事件冒泡基本相同，在vue中也有很方便的操作方法：@click.prevent="print()"4.键盘事件vue中内置了一些键盘事件，方便开发者操作。语法如下：@keydown.13="print()"@keydown.enter="print()"除了回车事件，还有很多其他的键盘事件，例如：@keydown.38="打印（）”。还有一些其他的键盘事件，具体请参考官方文档。默认没有@keydown.a/b/c...事件，可以全局自定义键盘事件，也称为自定义键码或自定义键别名：Vue.config.keyCodes={v:86,f1:112,//驼峰式不可用mediaPlayPause:179,//换成kebab-case并用双引号括起来"media-play-pause":179,up:[38,87]}exceptstop,prevent,keyCode这些事件中除了修饰符，还有一些比较常用的：.native——监听组件根元素上的原生事件。.once-只触发一次回调。5.AttributesVue提供了绑定属性的方法：v-bind:attributename=""，这样我们就可以动态改变属性值。1.属性缩写和event一样，也有简写方式::propertyname=""2.class和style属性绑定class和style属性时的语法比较复杂。（1）变量形式html部分：Hellovue.js

对应vue数据部分：data:{myClass:className}（2）数组形式，同时引入多个类html部分：Hellovue.js

对应vue的data部分：data:{myClass1:className1,myClass2:className2,}(3)json形式(常用)HTML部分：Hellovue.js

(4)变量引用json形式html部分：hellovue.js对应的vue的data部分

:data:{myClass:{className:true}}style的用法和class基本一样，只是不常用。6.模板Vue.js使用基于HTML的模板语法将DOM绑定到Vue实例中的数据。模板为{{}}，用于数据绑定并显示在页面上，也称为Mustache语法。1.数据绑定的方式(1)双向数据绑定使用v-model指令，之前学过。(2)单向数据绑定a．使用两对花括号{{}}这个以前经常用到，但是有一个缺点就是当vue实例编译时间比较长的时候页面上会出现{{}}（闪烁现象）。Vue提供了一种解决方案：配合css使用v-cloak。//html内容{{msg}}//css内容[v-cloak]{display:none;}b.使用指令v-text，v-htmlv-text也可以达到和使用v-cloak一样的效果。//html内容v-html会将文本中的html解析成html标签，然后渲染到页面中。//htmlcontent//vue实例数据中data部分内容：{msg:'hellovue.js'}，这里vue.js会有黄色背景色。7.FiltersFilters用于过滤模型数据，在显示前进行数据处理和筛选。语法：{{数据|过滤器1（参数）|过滤器2（参数）}}。vue1.0内置了很多过滤器，2.0都删掉了。使用过滤器我们可以使用第三方库：lodash、date-fns日期格式、accounting.js货币格式。或者我们可以自定义过滤器。1.自定义过滤器过滤器分为全局过滤器和局部过滤器。(1)全局过滤器使用全局方法Vue.filter(filterID,filterfunction)。示例：

{{8|addZero}}

//数据将自动传递为Vue.filter('addZero',data=>{returndata>10?data:'0'+data;});有时过滤器还需要传递自己的参数：

{{12.3456|number(3)}}

Vue.filter('number',(data,n)=>{returndata.toFixed(n);});(2)局部过滤器局部过滤器的用法与全局过滤器相同。但是，过滤器是写在vue实例中的filters选项中的。newVue({el:'#app',data:{},filters:{number:data=>{//具体操作}}})待续。

上一篇：CSS盒模型简介

下一篇：凹陷的优惠券样式

Vue学习笔记(一)相关文章

最新推荐

猜你喜欢