Vue快速入门（含下载地址）

最新推荐文章于 2023-08-17 09:17:27 发布

梦中情几许

最新推荐文章于 2023-08-17 09:17:27 发布

阅读量255

点赞数

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

本文链接：https://blog.csdn.net/qq_52814098/article/details/125903134

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

Vue快速入门

文档

想学习vue，最好的文档就是官网

这里列出几个：

第一个vue

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

</head>

<body>
    <div id="app">
        {{message}}zass
    </div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>


</body>

</html>

首先引入vue.js，可以本地，可以用链接，这里附上下载地址
然后new vue({}),在el后是用css id选择器绑定到 div中（注意，这里可以用其他选择器，如类选择器等，但是一般使用id，id唯一)
vue并不能挂载到全部标签上，如body和单标签不能挂载，一般使用div挂载

data

使用vue的一个关键就是，vue可以实现很容易实现数据的绑定
所有数据都写在data中,数据类型包括对象，数组，string等
组件中要用{{}}包括data中的数据例如{{message}}
获取对象属性用 object.property 获取数组数据用下标索引例如 num[0]

vue 指令

内容绑定,事件绑定

v-text

v-text就是设置数据内容和上面的{{message}}相似，不同的是，v-text="message"会把标签里的内容全部替换，而单独的插值表达式{{}}可以和别的数据一起写
而且{{}}或""中可以写表达式例子如下

<div id="app">
        <div v-text="message">123</div>
        <div>{{message}}123</div>
        <div>{{message+"123"}}</div>
 </div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>

v-html

v-html是设置标签的innerHtml

<div v-text="htmlTest"></div>
<div v-html="htmlTest"></div>

 <script>
       var app = new Vue({
           el: '#app',
           data: {
               htmlTest:'<h2>一起进步鸭<h2>'
           }
       })
   </script>

v-on

v-on就是为元素绑定事件
v-on:click=“方法名”,v-on:mouseenter="方法名"等，也可以简写用@代替v-on: 例如 @click=“方法名”
vue 方法要写在methods中，和data平级

<input type="button" value="事件"v-on:click="onClick"></input>
<input type="button" value="鼠标移入" @mouseenter="ent"></input>
  
<script>
        var app = new Vue({
            el: '#app',
            methods: {
                onClick() {
                    alert("button被点击")
                },
                ent(){
                    alert("鼠标进入")
                }
            }
        })
    </script>

通过this.数据名改变，实现双向绑定

    <h2 @click="changeStudy">{{study}}</h2>

    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                study:"学习"
            },
            methods: {
       
                changeStudy(){
                    this.study+="使我快乐"
                }
            }
        })
    </script>

显示切换,属性绑定
- v-show
  - v-show就是控制元素的显示或隐藏
  - v-show=true显示，v-show=false隐藏，也可以写表达式
- v-if
  - 根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)，通过v-if=“true”,控制dom创建，否则不创建和v-show区别就是，v-show控制disply，通过样式控制
  - 建议频繁切换的元素用v-show
- v-bind
  - 主要用来给组件属性绑定数据
  - ```
  <image v-bind:src="imgSrc"></image>
  //简写
  <image :src="imgSrc"></image>
  //控制类名绑定
  <image src="" :class="{img:isRight}"></image>
  <image src="" :class="isRight?'img':''"></image>
```
列表循环表单元素绑定
- v-for
  - 根据数据生成列表结构，把模板和包括的内容生成若干份
  - ```
    <ul>
  
              <li v-for="item in arr" :title="item">
                  你好呀
              </li>
              <li v-for="(item,index) in arr">
                  你好呀{{index}}
              </li>
          </ul>
```
- v-on
  - 可以给事件传递参数在（）里写即可，定义方法要有形参
  - 事件修饰符
  - ```
  <input placeholder="输入" type="text" @keyup.enter="sayHi">
```
- v-model
  - 实现表单数据的双向绑定，即改变vue中数据会改变表单数据，表单数据改变也会同时改变vue数据,v-model会改变表单value
  - ```
      <input placeholder="用户名" v-model="username">
      <div>{{username}}</div>
```
- vue.js下载地址
  提取码：1234