Vue基础教程，使用方法

最新推荐文章于 2024-07-10 18:13:56 发布

月苏西

最新推荐文章于 2024-07-10 18:13:56 发布

阅读量1.1w

点赞数 5

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53150999/article/details/122372063

版权

vue 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

一.引入vue.js

二.创建一个vue实例

在实例化vue的时候，有两种挂载方式

1.最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素

el：设置被操作的元素，表示vue要控制的区域，值为css选择器

data：

类型是对象

作用存放要用到的数据，数据为响应式的

三.将数据绑定到页面元素

   {{lcy}}

{{}} 意思是Mustach语法，vue中用{{}}来定义模板和数据的关联，可以是property键值，也可以是js表达式比如：{{msg?"完成":"未完成"}}

四.指令

注：使用v- 属性绑定数据是不需要双花括号包裹

1.什么是指令？

具有特殊含义，拥有特殊功能的特性
指令带有v-前缀，表示它们是Vue提供的特殊特性
指令可以直接用data中的数据

2.基础指令

v-pre : 直接显示原始标签，不获取data中的值
v-once：只渲染一次，元素及其子节点视为静态并跳过
v-text：等同与{{msg}}，优先级高于Mustache（v-text替换元素的所有内容，{{}}只替换自己）
v-html：更新元素的innerHTML（内容按普通html插入，不会作为vue模板编译）

3.条件渲染指令

v-if：条件性渲染一块内容
v-else if
v-else
v-show：根据表达式真假值，切换元素的display CSS属性

4.列表渲染指令

v-for：列表渲染

5.v-bind指令

动态的绑定一个或多个特性，全动态，可以随data里数据改变而改变
可以去除v-bind 直接写 :***, :后为传递的参数

例子：

点击切换属性：

点击更改属性：

也可以直接绑定一个样式对象：

修饰符：

.指名的后缀，用来指出一个指令应该以特殊方式绑定

.camel：用于绑定特性时，会将大写字母转化为小写字母

.prop：用于绑定DOM属性

.sync

6.v-on指令

v-on指令可以监听DOM事件，并在触发时运行一些javaScript代码

该指令用于监听某个元素的点击事件，执行的方法通常是在methods中定义

简写为： @click=" "

事件的类型由参数决定

可以接受一个需要调用的方法

事件修饰符：

.stop：阻止事件冒泡
.prevent：阻止默认事件
.once：执行一次
.self：绑定的元素本身触发时才触发回调（也能阻止事件冒泡）
.capture：事件捕捉模式

按键修饰符：

.enter（回车键）
.tab
.delete（删除或退格）
.esc
.space（空格键）
.up（上建）
.down（下键）
.left（左键）
.right（右键）

例子：

$event 固定写法

$event.target 事件对应的html节点

7.列表渲染

v-for：

利用v-for指令，基于数据多次渲染元素

下面分别展示v-for循环数组和对象

v-for="(item,index) in array" 
// array 为依赖的数据，item为数组的项，index为数组的下标索引

v-for="(value,key,index) in object"
// object为js依赖的对象，value为值，key为键，index为索引

渲染数字：

用法：n in num 参数： n：数字，从1开始

渲染字符串：

用法：str in string 参数：str：字符串，原数据字符串中的每一个

另外：

可以利用template元素循环渲染一段包含多个元素的内容

key：管理可复用的元素，辅助vue更好的识别根节点更好的优化渲染，建议key使用后台数据的唯一id值

8.表单绑定

v-model：

使用v-model指令在表单上，元素上创建双向数据绑定，会根据控件类型自动选取正确的方法

v-model 相当于做了两个操作：v-bind绑定一个value属性，v-on指令给当前元素绑定input事件

可以在表单元素上创建双向绑定。即数据更新，元素更新，元素更新，数据也更新

注：

v-model会忽略所有的表单元素的value，checked，selected的初始值，而是将vue实列的数据作为数据来源。

v-model表达式的初始值未能匹配任何选项，元素将渲染成为选择状态

例：

1.双向绑定：表单的输入值可以返回给实列数据

2.绑定多个复选框：

绑定到一个数组，数组中的值为被选中的value值

3.绑定单选框：

被绑定的数据和value同步

4.绑定下拉列表

它会依据实列数据对表单进行匹配

5.修饰符：

.lazy：添加lazy修饰符，在变成change事件后进行同步

.number：自动将用户的输入值变为数值类型

.trim：自动过滤用户输入的首位空白字符

9.自定义指令

1.全局自定义指令

//自定义全局的指令
Vue.directive('focus', {
     //第一个参数永远是el，表示原生的js对象
     bind: function (el) { //当指令绑定到元素上的时候，会立即执行bind函数，只执行一次，此时元素还没有插入到DOM中,focus聚焦此时不会生效
         el.focus()
     },
     inserted: function (el) { //当元素插入到DOM中的时候，会执行inserted函数，只执行一次
         el.focus()
     },
     updated: function () { //当VNode的时候，会执行updated函数，可能出发多次
     }
 });

// 使用全局自定义指令
<input type="text" class="form-control" v-model="keywords" v-focus">

2.私有自定义指令

作为和methods平级的属性定义在VM的实例中

directives: {
    'fontweight': {
        bind: function (el, bingding) {
            el.style.fontWeight = bingding.value;
        }
    },
    'fontsize': function (el, bingding) { //这个function等同于把代码写到了bind和update中去
        el.style.fontSize = parseInt(bingding.value) + 'px';
    }
}

// 在dom中使用
 <div id="app2" v-color="'pink'" v-fontweight="200" v-fontsize="20">
    <p>{{date | dateFormat}}</p>
 </div>