vue

Vue

Vue介绍

vue分为两个版本，开发版本development和生产版本production

开发版本：vue.js里，有注释，有空格，有换行等，并且有提示，尤其是错误提示。

生产版本：vue.js被压缩成了一行，所有不必要的注释/空格/换行等，都被删除，而且删除了所有的提示，目的是为了减小项目体积，使打开页面更快，项目上线时用。

使用Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引用vue-->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <!--2.新建app-->
<div id="app">
    <!--6.双大括号展示数据-->
    <button @:click="count++">Count is:{{count}}</button>
</div>
<script>
    // 3.导入creatrApp
    const {createApp} = Vue //ES6中对象的结构赋值
    createApp({
        data() {//ES6中对象的结构赋值(函数),看不懂，回去看ES6笔记
            return {
                count: 0 //4.创建数据
            }
        }
    }).mount('#app')

    // Vue.createApp({
    //     data:function () {
    //         return{
    //             count:0
    //         }
    //     }
    // }).mount('#app')

</script>
</body>
</html>

文本差值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app"></div>
<p>{{msg}}</p>
<!--最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)-->
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                msg:'hellow,world!'
            }
        }
    }).mount('#app')
</script>

js中的数据，展示在界面上，相当于原生js中的innerText方法

原始html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<p>我会{{msg}}了</p>
<p>我会<span v-html="msg"></span>了</p>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                msg:'<strong>Vue</strong>'
            }
        }
    }).mount('#app')
</script>

本指令相当于原生js中的html

Attribute 绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p v-bind:id="idName">我会了</p>
    <img v-bind:src="imgUrl" alt="">
    <img :src="imgUrl" alt:"">
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                idName:'txt',
                imgUrl:'1.png'
            }
        }
    }).mount('#app')
</script>

V-bind来修改标签的属性，简写用：即可。

布尔型Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <audio src="" :controls="ctl"></audio>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
            ctl:true//false
            }
        }
    }).mount('#app')
</script>

同时绑定多个Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <div v-bind="obj">6568</div>
    <div :="obj">简写成:也可以</div>

</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
            obj:
                {
                    id:'textId',
                    className:'textClass',
                   //注意:class名在js中要写成className，在这里用class或className都可以
                    title:'我是title'
                    
                }
            }
        }
    }).mount('#app')
</script>

使用javascript表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>number:{{num+1}}</p>
    <p>小明本次考试{{scoreNum<60?"不及格":"及格"}}</p>
    <!--    这里必须是表达式-->
    <p :id="`list-${id}`">{{message.split('').reverse().join('')}}</p>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                num: 0,
                scoreNum: 59,
                message: 'Hello World',
                id:1
            }
        }
    }).mount('#app')
</script>

注意：每个绑定仅支持单一表达式，也就是一段能够被求值的javascript代码（语句不可以）。

调用函数

可以在绑定的表达式里调用函数，但非常不建议这样做，可以使用Math或Data等全局暴露的函数。

<p>生成一个随机数{{Math.random()}}</p>

computed计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{reverseStr}}</p>
    <ul>
        <li><p>{{text.split('').reverse().join('')}}</p></li>
        <!--上方代码，同样的功能要计算两次，消耗性能，并且导致html代码臃肿，下方的更佳-->
        <li><p>{{reverseStr}}</p></li>
    </ul>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
        text:'hello world'
            }
        },
        computed:{
            reverseStr(){//这里一定要指定this，text，this指的是当前实例，可以理解为data里的数据
                return this.text.split('').reverse().join('')
             }
        }
    }).mount('#app')
</script>

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{count}}</p>
    <button v-on:click="add()">+</button>
    <button @click="add()">+</button>
    <button v-on:click="less()">-</button>
    <button @click="less()">-</button>

    <button @click="add(5)">+5</button>
    <button @click="add(6)">+6</button>

    <button @click="less(5)">-5</button>
    <button @click="less(6)">-6</button>

</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                count: 0
            }
        },
        computed: {//计算属性

        },
        methods: {//方法
            add(a = 1) {
                // this.count=this.count+a
                this.count += a

            },
            less(a = 1) {
                // this.count=this.count-a
                this.count -= a

            }
        }
    }).mount('#app')
</script>

计算属性vs方法

注意：计算属性和方法，在结果上确实是相同的，然而不同之处在于计算属性会基于其响应式依赖而被缓存，一个计算属性仅会在其响应式依赖更新时才会被重新计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="number" v-model="count">
    <p>输入数字乘以2：{{ChengYi2}}</p>
    <p>methods:{{methodChengYi2()}}</p>

</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                count: 0
            }
        },
        computed: {//当数据来源被改变，则计算属性重新计算
            ChengYi2() {
                return this.count * 2
            }
        },
        methods: {//方法
            methodChengYi2() {
                return this.count * 2
            }

        }
    }).mount('#app')
</script>

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
    <li v-if="type==='A'">AAAAAA</li>
<!--    <li v-else-if="type==='B'">BBBBBB</li>-->
    <li v-else>CCCCCC</li>
</ul>
    <p v-show="seen">现在你看得到我</p>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                type:'B',
                seen:true

            }
        }
    }).mount('#app')
</script>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>书名</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="{book,index} of books" :key="index">
<!--        key一般是数据库里的数据上的唯一且不重复的主键-即id-->
        <td>{{book.id}}</td>
        <td>{{book.name}}</td>
        <td>{{book.price}}</td>
    </tr>
    </tbody>
</table>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                books:[
                    {id:0,name:'三体',price:68},
                    {id:1,name:'平凡的世界',price: 89},
                    {id:2,name:'三国演义',price:40}
                ]
            }
        }
    }).mount('#app')
</script>

表单输入绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" :value="text" @input="ipt($event)">
    <input type="text" v-model="text">
    <p>{{text}}</p>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
            text:'hello world'
            }
        },
        // methods:{
        //     ipt(event){
        //         this.text=event.target.value
        //     }
        // }
    }).mount('#app')
</script>

多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
<!--    多行文本，即换行符，可以被v-module实时修改数据-->
    <p style="white-space: pre-line;">{{ message}}</p>
<!--    此css属性可以展示字符串中的换行符-->
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                message: ''
            }
        },
    }).mount('#app')
</script>

数据单项绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<label for="ipt"></label>
    <input type="checkbox" id="ipt" :checked="checked">打篮球
<!--    数据单项绑定，data驱动ui，ui不可修改data-->
    <p>{{checked}}</p>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                checked:false
            }
        },
    }).mount('#app')
</script>

数据双项绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<label for="ipt"></label>
    <input type="checkbox" id="ipt" v-model="checked">打篮球
<!--    数据单项绑定，data驱动ui，ui不可修改data-->
    <p>{{checked}}</p>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                checked:false
            }
        },
    }).mount('#app')
</script>

将多个复选框绑定到同一个数组或集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h2>选中的人是：{{checkedNames}}</h2>
    <input type="checkbox" v-model="checkedNames" value="Jack">
    <input type="checkbox" v-model="checkedNames" value="John">
    <input type="checkbox" v-model="checkedNames" value="Mike">
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                checkedNames:[]
            }
        },
    }).mount('#app')
</script>

单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h2>选中的人是：{{picked}}</h2>
    <input type="radio" v-model="picked" value="1">男
    <input type="radio" v-model="picked" value="0">女
    <input type="radio" v-model="picked" value="-1">自定义
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                picked:1
            }
        },
    }).mount('#app')
</script>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div>Selected: {{ selected }}</div>

    <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                selected:''
            }
        },
    }).mount('#app')
</script>

注意

如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。

多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div>Selected: {{ selected }}</div>

    <select v-model="selected" multiple>
<!--        <option disabled value="">Please select one</option>-->
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                selected:''
            }
        },
    }).mount('#app')
</script>

修饰符 lazy number trim

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.lazy="message">
    <input type="text" v-model.number="message">
    <input type="text" v-model.trim="message">
    <p>{{message}}</p>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    createApp({
        data() {
            return {
                message: ''
            }
        },
    }).mount('#app')
</script>

生命周期

侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <style>
        @keyframes zhuan {
            0%{transform: rotate(0)}
            100%{transform: rotate(360deg)}
        }
        .active{animation: zhuan 10s linear infinite}
    </style>
</head>
<body>
<div id="app">
<p>{{message}}</p>
    <input type="text" v-model="message">
    <p>{{name}}</p>
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    const vm=createApp({
        data() {
            return {
                message:'1111',
                name:'xxxx'
            }
        },
        watch:{
            message(){//要监听哪个数据，就对应哪个
                // console.log('message changed')
                if (this.message.length>=10) alert('long')
            }
        }
    }).mount('#app')
</script>

vue中的dom操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <style>#test{width: 100px;height: 100px;background: red}</style>
</head>
<body>
<div id="app">
<div id="test" ref="test"></div>
    <button @click="big">变大div</button>
    <input type="text" ref="ipt">
</div>
</body>
</html>
<script>
    const {createApp} = Vue
    const vm =createApp({
        data() {
            return {

            }
        },
        methods:{
            big(){
                //原始js方法，极不推荐
                /*const test=document.getElementById('test')
                test.style.width='200px'*/
                console.log(this.$refs)
                this.$refs.test.style.width='200px'
            }
        },
        setup(){console.log(this.$refs())},
        beforeCreate(){console.log(this.$refs)},
        created(){console.log(this.$refs)},
        beforeMount(){console.log(this.$refs)},
        mounted(){this.$refs.ipt.focus()}
    }).mount('#app')
</script>

vue脚手架

vue-cli

安装

#首先，确保已安装node和npm
node-v
npm -v
#其次，确保npm镜像地址是国内的淘宝镜像(有梯子除外)
npm config get registry
#如果结果是：https://registry.npmirror.com/则说明是淘宝镜像
#否则就输入：
npm config set registry https://registry.npmirror.com/
#再次安装vue-cli：
npm i -g @vue/cli
#查看版本
vue -V

基于vue-cli创建vue3.0项目

vue create hello-world #项目名必须是小写英文字母
Manally select features #手动选择分支
Bable #仅选择Bable （上下切换，空格选择/取消，回车确认）
choose aversion for Vue? #3.X
where do you? #in dedicate config files 保存到本地文件
Save this as a preset #no，不保存为未来分支
cd hello-world
npm run serve
#复制网址到浏览器打开即可

基于vue-cli vueUI创建项目

非常不建议使用，丢人现眼。

基于Vite创建Vue项目

基于vite，不需要安装，只要有node和npm即可，但是node版本要在15.0以上

$npm init vue

项目目录

vue-project
----.vscode			配置vscode 没用
----node_modules
----public
----src				关键，程序员写代码都在这里面
------assets		项目所需的静态文件，图片，css，等
------components	组文件夹
------App.vue	 	根组件
------main.js
----.gitignore		git上传时，不要的文件配置
----index.html		页面，仅包含一个#app
----package.json
----package-lock.json
----README.md
----vite.config.js	vite配置文件

组件

组件是vue中框架的基石，是最重要的部分。

新建组件

在vite创建项目中创建组件:

在components文件夹下，右键新建.vue文件，就是一个组件

<template>
<p>这里面写标签
    外层的template仅做辅助编译，将来生成的html界面中，不存在template标签</p>
<div>
    在过去，vue2中，这里的根标签必须仅能有一个(即template的亲儿子只能有一个)，vue3不做限制
    </div>
</template>

<script>
//这里面写js
    export default {//对外暴露，ES6模块化的语法，等同于node中commonJs中的module.exports
        name: "HelloWorld",
        data() {
            return {
                message: ''
            }
        }
    }
</script>

<style scoped>
/*这里是css
    这里的scoped，通过给被选中的标签生成独一无二的随机属性名来让当前css仅在本组中生效*/
</style>

引入组件

在组建中引入组件

<template>

</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    //编辑器可能会把.vue省略掉，vite中一定要加上
    //如果在vue-cli中，可以不加.vue后缀
    export default {
        name: "Header-1",
    }
</script>

<style scoped>

</style>

注册组件

注册组件分两种，分别为注册局部组件和注册全局组件。

注册局部组件（常用）

<template>

</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    //编辑器可能会把.vue省略掉，vite中一定要加上
    //如果在vue-cli中，可以不加.vue后缀
    export default {
        name: "Header-1",
        components:{
            //HelloWorld:HelloWorld
            HelloWorld
        }//注册组件
    }
</script>

<style scoped>

</style>

全局注册组件

main.js

import {createApp} from 'vue'
import App from './App.vue'

import Header1 from './components/Header-1.vue'//引入

createApp(App).component('Header1',Header1)//全局注册
    .mount('#app')

使用组件

父组件

<template>
  <HelloWorld></HelloWorld>
  <HelloWorld/>
  <hello-world></hello-world>
  <hello-world/>
</template>

注意：当组件中没有内容时，才可以写成单表签形式

posted @ 2022-09-14 11:30 |oxo 阅读(179) 评论(0) 编辑收藏举报

刷新页面返回顶部

bokepoke

vue

Vue