vue框架

白天的我最菜

已于 2023-07-30 11:15:01 修改

阅读量50

点赞数

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

于 2023-07-25 19:48:52 首次发布

本文链接：https://blog.csdn.net/m0_72735063/article/details/131922085

版权

项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

运行步骤目录

1.javaScript框架

2.简化dom操作

3.响应式数据驱动

css中#是ID选择器

vue官方课程：

{}用于关联，由相关选择器关联起来

用标签<script src="vue.js" type="text/javascript" charset="UTF-8"></script>

或者cnd。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>引入

引入Vue就有了vue全局变量

data为了注册变量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>
    <div id="app">
        {{message}}
        {{name}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                // 注有，
                message:"很好笑的笑话sdadwad",
                name :"Vue"
            }
        })
    </script>
</body>

</html>

一般用id选择器唯一的，类选择器可能会选多个

对象.调用。数组索引调用

3. v-html

 v-html指令参数进行传递 。是个标签属性。可以把变量变成HTML元素而不是普通标签+

4.v-bind及表达式

（1）v-bind写样式插值

（2）算术运算

输出

（3.）三元表达式

输出

（4.）函数运算：分开返序结合

输出

5.vue指令

(1)v-if指令将根据表达式 seen的值的真假来插入移除<p> 元素。

(2)链接元素

（3.）点击事件

若变成这个.stop。那么点击click2后就停止了

输出：

6.Class与Style绑定

（1.）

若为false则无样式绑定

输出：

动态样式由true和false决定

（2）绑定内联样式

第一个color是属性，第二个是变量

7.条件渲染

（1）

输出

（2.）v-show，相当于隐身了，但还在开发者工具里面

（3）v-if v-show

8.列表渲染

输出：

8.事件绑定

（1）

dblclick则为双击事件

输出：

（2）

9.表单输入双向绑定

（1）单行输入框

多行输入框

data里面为空的话就什么都没有

placeholder：初始默认阴影

v-model双向绑定，会改变所有message的文本

（2）

因为复选框可能选中多个元素，所以用数组

输出：

（3）如何收集客户提交的值，加一个提交事件

输出：

10.组件基础

因为要复用所以要组件

（1）Vue.component创建组件

注意是写到紧接script后面

data数据，template 模版

输出：可以用来计数

（2.）

多个组件，通过HTML标签的形式对标签的

div里调用的名称就是组件的名称

props设置属性

输出：

（3）一个模版内实现多个HTML标签

但是要，创建一个模版一般要一个根节点

组件的事件监听

this.$emit触发clicknow，称为组件内部传出来的count数据

实现：

点击count按钮，0变为1，$emit触发clicknow函数，通过事件绑定去执行这个函数，在控制台打印出来。

附：也可以通过slot创建一个HTML插槽

11.组件注册

局部组件名字叫test

然后就可以test标签来调用test组件

若想使用webback系统，那么用

import 组件名称 from 组件位置，如何在对象内部用components属性进行局部注册

12.单文件注册

为了每个文件名字不能重复

template是dom区域

script脚本区域

style是css区域

npm安装

详细安装步骤参考于：xnpm安装教程 - Gold_Long - 博客园 (cnblogs.com)https://www.cnblogs.com/goldlong/p/8027997.html

运行步骤：

(29条消息) 如何运行vue项目(超详细图解）_如何运行一个vue页面_忧郁的蛋~的博客-CSDN博客https://blog.csdn.net/lwf3115841/article/details/130604476必须在此目录下运行才能成功否则报错或者下载全局

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: D:\nodejs\node_cache\_logs\2023-07-28T01_51_15_218Z-debug-0.log

注意要到D盘才能运行

或者npm run serve运行

npm start

白天的我最菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue框架

script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">引入。用标签{}用于关联，由相关选择器关联起来。引入Vue就有了vue全局变量。1.javaScript框架。css中#是ID选择器。data为了注册变量。
复制链接

扫一扫