vuejianjingshi

最新推荐文章于 2024-06-01 15:46:07 发布

m0_48342985

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量1.6k

点赞数 34

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_48342985/article/details/137239659

版权

1、什么是Vue？

Vue是一款用于构建用户界面的渐进式的JavaScript框架

2、局部使用Vue

Vue快速入门

1、准备：

准备html页面，并引入Vue块
创建Vue程序的应用实例
准备元素（div），被Vue控制

2、构建用户界面

准备数据
通过插值表达式渲染页面

示例

 <div id="app">
        <h1>{{msg}}</h1>    //插值表达式
 </div>
 <!--引入vue模块-->
 <script type="module">
     import {createApp} from 'http://unpkg.com/vue@3/dist/vue.esm-browser.js';
     /*创建cue的应用实例*/
     createApp({
         data(){
             return{
                 //定义数据
                 msg: 'hello vue3'
             }
         }
     }).mount("#app");
 </script>

常用指令

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

v-for

作用：列表渲染，遍历容器的元素或者对象的属性
语法：v-for="(item,index) in items"
参数说明

items为遍历的数组
item为遍历的元素
index为索引，从0开始

示例：

<div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <!--那个元素要出现多次，v-for指令就添加到哪个元素-->
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        
        </table>
    </div>

    <script type="module">
        //导入vue模块
        import {createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例
        createApp({
            data() {
                return {
                    articleList:[{
                        title:"医疗反腐绝非砍医护收入",
                        category:"时事",
                        time:"2023-09-5",
                        state:"已发布"
                    },
                    {
                        title:"中国男篮缘何一败涂地？",
                        category:"篮球",
                        time:"2023-09-5",
                        state:"草稿"
                    },
                    {
                        title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                        category:"旅游",
                        time:"2023-09-5",
                        state:"已发布"
                    }]
                }
            }
        }).mount("#app")//控制页面元素

结果：

v-bind

作用：为HTML标签绑定属性值，如设置 href , css样式等
语法：v-bind:属性名="属性值"
简化：:属性名="属性值"

v-bind绑定的数据，必须在data中定义

<div id="app">
        <a v-bind:href="URL">百度官网</a>
    </div>

    <script type="module">
        //引入vue模块
        import {createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    URL: 'http://baidu.com'
                }
            }
        }).mount("#app")//控制html元素
    </script>

v-if&v-show

作用：控制元素的显示与隐藏
v-if

语法：v-if="表达式"，表达式为true，显示；

原理：基于条件判断，来控制创建或移除元素节点

场景：不频繁切换的场景

v-show

语法：v-show="表达式"，表达式为true，显示；

原理：基于css样式display来控制显示和隐藏

场景：频繁切换显示隐藏的场景

示例：

    <div id="app">
        <h1>用户等级为{{customer.level}}</h1>
        手链价格为:  <span v-if="customer.level>=0&&customer.level<=1">9.9</span>  
                    <span v-else-if="customer.level>=2&&customer.level<=4">19.9</span> 
                    <span v-else>29.9</span>

    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    customer:{
                        name:'张三',
                        level:2
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>

结果根据level不同进行展示:

下方的结果使用v-show，注意到使用v-if直接无参数，而使用v-show利用display来隐藏。

v-on

作用：为HTML标签绑定事件
语法：

v-on：事件名="函数名"

简写为 @事件名="函数名"

示例：

    <div id="app">
        <button v-on:click="money">点我有惊喜</button> &nbsp;
        <button v-on:click="love">再点更惊喜</button>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods:{
                money:function(){
                    alert('命里有官')
                },
                love:function(){
                    alert('书不用翻')
                }
            }
        }).mount("#app");//控制html元素

v-model

作用：在表单元素上创建双向数据绑定，方便获取或设置表单数据

语法：v-model="变量名"

3、vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	数据更新前
updated	数据更新后
beforeUnmount	组件销毁前
unmounted	组件销毁后