VUE 入门

最新推荐文章于 2024-05-30 11:27:58 发布

结构化思维wz

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量405

点赞数 2

分类专栏： # VUE3 文章标签： vue javascript 新星计划

本文链接：https://blog.csdn.net/Ares___/article/details/117899002

版权

VUE3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE 入门

文章目录

VUE 入门
项目结构：
入门
- - vue中的应用创建
  - 方法
模板语法

项目结构：

我们如果用npm创建的vue项目会生成如下结构：

在这里插入图片描述

node_modules -----npm加载的项目依赖模块
public --------公共资源目录
src --------99.9%的开发都主要在这里面做
- assets ------ 放图片
- components ------放组件
- APP.vue ---------- 项目入口文件，我们可以直接将组件写在这里，从而不用components
- main.js ---- 项目核心文件
- index.css ------样式文件
.xxxx ------ 一些配置文件，最常见的就是git的配置文件

package.json ------- 项目配置文件

入门

先从最基础的部分入门，创建新的文件引入vue

<script src="https://unpkg.com/vue@next"></script>

vue中的应用创建

vue中的应用是通过createApp函数来创建的

const app =Vue.createApp({/*选项*/})

选项：用于配置根组件，在使用**mount()**挂载应用的时候，该组件是渲染的起点
mount 挂载，在linux中是将分区挂接到linux中的一个文件夹。这里可以理解为将某个vue应用与html中的某一部分联系起来

实例：

Vue.createApp(HelloVueApp).mount('#hello-vue')

根组件是HelloVueApp，在挂载应用时，该组件是渲染的起点
mount(’#hello-vue’) 将vue应用HelloVueApp挂载到 id 为“hello-vue”的DOM元素中。

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

{{ }} 用于输出对象属性和函数返回值
{{ message }} 对应应用中 message 的值。
data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

方法

我们可以在组件中添加方法(与data同级)，使用methods选项，该选项包含了所修方法的对象。

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  },
    methods:{
        mrthod1(){
            语句
        },
        method2(){
            语句
        }
    }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

模板语法

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

数据绑定

数据绑定最常见的形式就是使用 {{…}} 的文本插值：

<p>{{message}}</P>

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ message }}</span>

v-html 传过去的值会被认为是html代码，输出结果

<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

属性绑定

HTML 属性中的值应使用 v-bind 指令。

<div v-bind:id="dynamicId"></div>

对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

<button v-bind:disabled="isButtonDisabled">按钮</button>

以上代码中如果 isButtonDisabled 的值是 null 或 undefined，则 disabled 属性甚至不会被包含在渲染出来的元素中。

例如

 <a v-bind:href="url">click me</a>

使用v-bind绑定了a标签的href属性，当a标签被点击时，会根据对应vue中的对应的url数据进行跳转到相应url

表达式绑定

Vue.js 都提供了完全的 JavaScript 表达式支持。

表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。

<p>{{ ok ? 'YES' : 'NO' }}</p>

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

如下例子：

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true  /* 改为false，信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
还有许多其他指令

指令的参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">
    <p><a v-bind:href="url">菜鸟教程</a></p>
</div>
    
<script>
const app = {
  data() {
    return {
      url: 'https://www.runoob.com'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

v-on 指令，它用于监听 DOM 事件：

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

在这里参数是监听的事件名–click。

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

双向绑定 v-model

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
 
<script>
const app = {
  data() {
    return {
      message: 'Runoob!'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
本例运行输入框中与p标签会自动有“runoob”，改变输入框的内容p标签内容也随之改变

按钮翻转字符串实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻转字符串</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">点击翻转字符串</button>
</div>

<script>
    const app={
        data(){
            return{
                message:'Hello wz'
            }
        },
        methods:{
            reverseMessage() {
                this.message=this.message.split('').reverse().join('');
            }
        }
    }
    Vue.createApp(app).mount('#app');
</script>
</body>
</html>

在这里插入图片描述

缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

```

结构化思维wz

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
VUE 入门

VUE 入门文章目录VUE 入门项目结构：入门vue中的应用创建方法模板语法数据绑定属性绑定表达式绑定指令指令的参数修饰符双向绑定 v-model按钮翻转字符串实例：缩写v-bind 缩写v-on 缩写缩写v-bind 缩写v-on 缩写项目结构：我们如果用npm创建的vue项目会生成如下结构：node_modules -----npm加载的项目依赖模块public --------公共资源目录src --------99.9%的开发都主要在这里面做assets ------
复制链接

扫一扫