首页 > 其他分享> 文章详细

vue3基础入门

2022-08-29 19:02:58 阅读：164 来源： 互联网

标签：Vue return 入门基础 DemoApp vue3 组件 const data

vue3基础入门

官方网站：https://v3.vuejs.org/

中文文档: https://staging-cn.vuejs.org/guide/introduction.html

1、简介

1.1、vue是什么？

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

说白了，VUE就是一套 JS框架，与AngularJS、ReactJS、Vue.js、jQuery具有一样目的的框架。

1.2、VUE能干什么？

前端框架，能快速开发前端项目。

VUE是MVVM架构。

1.3、vue2和vue3区别

文章：https://www.jianshu.com/p/d3f973433274

vue2和vue3双向数据绑定原理发生了改变。
定义数据变量和方法的改变。
生命周期钩子函数的不同。
vue3中新加入了TypeScript和PWA的支持。

ue3.0比起vue2.0有以下优势：

打包大小减少41%
初次渲染块55%，更新渲染块133%
内存占比少54%

2、初识Vue指令

Vue3 教程 | 菜鸟教程

通过引用 JS文件来学习VUE的常用指令，由于CDN不稳定，建议下载到本地。

类似引用Jquery。

Staticfile CDN（国内）: https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js

指令是带有 v- 前缀的特殊属性。
直接作用在DOM元素上。
例如：
- v-html
- v-bind
- v-on
- ...

2.1、Hello Vue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
	<p>{{ message }}</p>
	<input v-model="message" />
</div>

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

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

{{message}}：这里使用的是数据绑定。
当input框改变时，页面显示的值也会随着变。
可以在 {{}} 写JavaScript 表达式，例如：{{5+5}}，true ? 'YES' : 'NO'

如果想值不跟着发生变化，添加 v-once。

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

2.2、v-html

v-html 指令用于输出 html 代码。

<div id="demo" class="demo">
    <p>普通数据绑定: {{ rawHtml }}</p>
    <p>转换HTML: <span v-html="rawHtml"></span></p>
</div>
<script>
const DemoApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">HTML代码</span>'
    }
  }
}

Vue.createApp(DemoApp).mount('#demo')
</script>

2.3、v-bind

v-bind 指令用于绑定属性中的值，例如：class动态绑定，style样式动态绑定，等等。
简写成：@

<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<div id="demo" class="demo">
    动态绑定值：<input type="text" v-bind:value="demoValue"><br/>
    <div v-bind:id="demoId">动态id</div>
    动态禁用:<button v-bind:disabled="isButtonDisabled">按钮</button>
    <p><a :href="url">百度一下</a></p>
    <div :class="{'class1':isClass}">
        动态class
    </div>
</div>
<script>
    const DemoApp = {
        data() {
            return {
                demoValue: '123',
                demoId: 'myDiv',
                isButtonDisabled: true,
                url: 'https://www.baidu.com/'
                isClass: true
            }
        }
    }

    Vue.createApp(DemoApp).mount('#demo')
</script>

2.4、v-on

v-bind 指令用于监听 DOM 事件，例如：点击事件，键盘监听，等等。
简写成：@

<div id="demo" class="demo">
  <button @click="counter += 1">增加 1</button>
   <!-- 监听回车键 -->
  <input @keyup.enter="counter +=2" />
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
    const DemoApp = {
        data() {
            return {
                counter: 0
            }
        }
    }

    Vue.createApp(DemoApp).mount('#demo')
</script>

2.5、v-if,v-show...

v-if 用于条件性地渲染一块内容，为false时 DOM 不存在该元素
v-else 与 v-if 组成一个“else 区块”。
v-else-if 相应于 v-if 的“else if 区块”
v-show 用于是否显示元素，为false时 DOM 存在该元素，只是添加了display:none属性。

<!-- 为false，则消失，页面也不存在DOM元素 -->
<h1 v-if="true">v-if</h1>
<!-- v-if 为false，sele才生效 -->
<h1 v-else>v-else</h1>

<!-- v-else-if -->
<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>

对比页面DOM

<div id="hello-vue" class="demo">
	<p v-if="flag">v-if</p>
	<p v-show="flag">v-show</p>
</div>

页面结果：

2.6、v-for

v-for 指令基于一个数组来渲染一个列表

普通用法： v-for="item in items"，每一个item 都是一个对象。

带索引用法：v-for="(item, index) in items"，index是索引，从0开始。

v-for 与 v-if

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。

<div id="demo" class="demo">
    <li v-for="item in items">
        姓名：{{item.name}},
		年龄：{{item.age}}
    </li>
</div>
<script>
    const DemoApp = {
        data() {
            return {
                items: [{ name: '小明', age:22 },
                        { name: '大白', age:23 },
                        { name: '张三', age:24 }]
            }
        }
    }

    Vue.createApp(DemoApp).mount('#demo')
</script>

2.7、v-model

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
    <div id="demo" class="demo">
        <h1>用户注册</h1>
        名称：<input v-model="demoForm.name" placeholder="名称" /> <br/>
        性别：<input type="radio" v-model="demoForm.sex" value="男" /> 男
            <input type="radio" v-model="demoForm.sex" value="女" /> 女 <br/>
        兴趣： <input type="checkbox"  v-model="demoForm.hobby" value="吃饭" /> 吃饭
                <input type="checkbox"  v-model="demoForm.hobby" value="睡觉" /> 睡觉
                <input type="checkbox"  v-model="demoForm.hobby" value="打豆豆" /> 打豆豆 <br/>
        区域：<select v-model="demoForm.region">
                <option>中国</option>
                <option>外国</option>
                <option>其它</option>
            </select> <br/>
        备注： <textarea v-model="demoForm.remark" placeholder="备注"></textarea>

        <div>
            表单内容：{{demoForm}}
        </div>
    </div>
    <script>
    const DemoApp = {
      data() {
        return {
            checkedNames:[],
            demoForm:{
                name:'',
                sex: '',
                hobby:[],
                region: '',
                remark: ''
            }
        }
      }
    }
    
    Vue.createApp(DemoApp).mount('#demo')
    </script>
</body>
</html>

修饰符

.lazy：每次 change 事件后更新数据

.number：自动转换为数字

.trim：去除内容中两端的空格

名称：<input v-model.trim="name" placeholder="名称" /> <br/>
年龄：<input v-model.trim="number" placeholder="年龄" />

3、生命周期

一个模板新创建时，都会执行一些初始化函数，开发者可以在对应的周期内，去做好数据的初始化或者数据侦听等操作。

例如：在页面渲染好后，执行方法：

export default {
  mounted() {
    console.log(`页面加载完成。`)
  }
}

图示：

现在不理解没有关系，以后做参考也是可以的。

4、ref

ref 获取底层 DOM 元素。
作用：input自动获取焦点。表单提交前校验.....
也可以被用在一个子组件上（后面会讲到）。

页面加载成功后对焦。

<div id="demo" class="demo">
    <input ref="input" />
</div>
<script>
    const DemoApp = {
        data() {
            return {
            }
        },
        mounted() {
            this.$refs.input.focus()
        }
    }

    Vue.createApp(DemoApp).mount('#demo')
</script>

5、计算属性

当值发生变化时，会跟着变化。

例如，根据不同的密码强度来显示强弱。

<div id="demo" class="demo">
    <input v-model="pwd"><br/>
	{{message}}
</div>
<script>
    const DemoApp = {
        data() {
            return {
                pwd:'',
				message: ''
            }
        },
        watch: {
            pwd(newPwd, oldPwd) {
                this.message = '新值:'+newPwd+',旧值'+oldPwd;
            }
        }
    }

    Vue.createApp(DemoApp).mount('#demo')
</script>

6、监听属性

如果监听当值发生变化时，会触发函数。

<div id="demo" class="demo">
    <input v-model="pwd">
</div>
<script>
    const DemoApp = {
        data() {
            return {
                pwd:''
            }
        },
        watch: {
            pwd(newPwd, oldPwd) {
                console.log('新值:'+newPwd+',旧值'+oldPwd)
            }
        }
    }

    Vue.createApp(DemoApp).mount('#demo')
</script>

7、组件概念

7.1、什么是组件？

有点像ctrt+C 和ctrt+V

例如，我这里有一段HTML代码，可以提取起来当模板使用。这个就是组件。

7.2、组件使用

一般会将 Vue 组件定义在一个单独的 .vue 文件中。这种叫做单文件组件 (简称 SFC)。

1、定义子组件

<!-- ButtonCounter.vue -->
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">你点击的次数 {{ count }}.</button>
</template>

2、引用子组件

<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}
</script>

<template>
  <h1>下面是子组件信息!</h1>
    <!-- 组件可以引用多次 -->
  <ButtonCounter />
</template>

7.3、组件之间传值

组件相关于模板，那不同的模板，应该是根据不同的值来显示不同的内容。

案例1：现在点击父组件的数据，子组件根据传过来的ID显示不同的值。

1、定义接收值的子组件。

<!-- IdShow.vue -->
<script>
export default {
  /* id:接收的属性名 */
  props: ['id']
}
</script>

<template>
  <h4>{{ id }}</h4>
</template>

2、定义传值的父组件。

<script>
    import IdShow from './IdShow.vue'

    export default {
        components: {
            IdShow
        },
        data() {
            return {
                id: 6
            }
        }
    }
</script>

<template>
    <h1>下面是子组件信息!</h1>
    <!-- 自定义attributes -->
    <IdShow :id="id" />
</template>

案例2：子组件向父组件传值

1、定义发送值的子组件。

<script>
export default {
    methods:{
        toMsg(){
            //msg是自定义事件名
            this.$emit('showMsg',"给父组件的值");
        }
	}
}
</script>

2、接收值的父组件。

<script>
import MsgShow from './MsgShow.vue'

export default {
  components: {
    MsgShow
  },
    data(){
        return {
            msg:''
        }
    },
    methods: {
        showMsgText(msg) {
            this.msg = msg
        }
	}
}
</script>

<template>
  <h1>接收值的父组件信息!</h1>
    <p>{{msg}}</p>
  <MsgShow @showMsg="showMsgText" />
</template>

7.4、组件占位符

html标签是有双标签的，
某些场景，需要向子组件，让子组件渲染这些字段。

案例：封装一个提示窗，父组件传值。

1、父组件

<子组件>
  <!-- 占位符内容 -->
  这是内容。
</子组件>

2、子组件

<div class="message">
  <!-- 占位符显示 -->
  <slot></slot>
</div>

标签：Vue,return,入门,基础,DemoApp,vue3,组件,const,data
来源： https://www.cnblogs.com/galenblog/p/16637003.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3基础入门

vue3基础入门

1、简介

1.1、vue是什么？

1.2、VUE能干什么？

1.3、vue2和vue3区别

2、初识Vue指令

2.1、Hello Vue

2.2、v-html

2.3、v-bind

2.4、v-on

2.5、v-if,v-show...

2.6、v-for

2.7、v-model

3、生命周期

4、ref

5、计算属性

6、监听属性

7、组件概念

7.1、什么是组件？

7.2、组件使用

7.3、组件之间传值

7.4、组件占位符