Vue.js

容岩174

已于 2022-10-24 08:37:24 修改

阅读量548

点赞数 1

文章标签： vue.js html 1024程序员节

于 2022-10-22 17:06:26 首次发布

本文链接：https://blog.csdn.net/weixin_63566703/article/details/127462074

版权

Vue.js是什么？

一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。同时Vue是目前前端的主流框架之一。vue核心是组件，组件，路由，还有spa单页面开发。

插值表达式

el唯一根标签

el用来绑定元素。可以对class或者id样式选择器进行绑定，但是在这里标签名和class样式选择器只能绑定一个，且在el不能对<html>、<body>进行绑定，最好使用id样式选择器并对其使用el绑定。

data初始数据

data用于存放变量，且在el绑定后可以对内容进行转换，对应写法如下：

<div id="app">{{name}}</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
    el:'#app',   //el与div元素进行绑定
    data:{
        name:'Vue'  //这里存放变量，name会和对应的{{name}}进行绑定
    }
})
</script>

Vue的数据绑定

v-bind（单向数据绑定）

v-bind主要实现单向数据绑定，且用于属性绑定。

其原格式<a v-bind:属性></a>可以简写为<a :属性></a>

v-model（双向数据绑定）

v-model主要实现双向数据绑定，且通常用于表单上

双向数据绑定：表单元素的值有变化，会触发变量的值变化，变量的值有变化会触发表单元素的值变化

常用标签

v-text和v-html

v-text:在元素内部插入文本内容，且它不能被用来识别标签。

v-html:在元素内部插入HTML中的标签内容，所以可以被用来识别标签。

<body>
        <div id="app">
            <!-- 插值表达式不能识别标签 -->
            <div>{{msg}}</div>
            <!-- v-html和v-text可以用来控制表标签的内容 -->
            <!-- v-html可以识别标签 xss风险 -->
            <div v-html="msg"></div>
            <!-- v-text不可以被识别标签 -->
            <div v-text="msg"></div>
        </div>

        <script src="JS/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'<h1>这是标题</h1>'
                }
            })
        </script>
    </body>
</html>

v-on

v-on:用于绑定事件(click,mousenter,mouseleave)

格式为：<button v-on:事件类型="函数"></button>

简写：<button @事件类型="函数"></button>

<div id="app">
            <button v-on:click="fn()">{{btn}}</button>
            <p>{{txt}}</p>
</div>
<script src="JS/vue.js"></script>
      <script>
            new Vue({
                el:'#app',
                data:{
                  txt:'请单击按钮'
                },
                methods:{
                    fn(){
                        this.txt = '我是v-on'
                    }
                }
            })
      </script>

v-if

v-if:可以控制标签是否存在(true存在，false不存在)

v-if="a" a可以是常量、变量、表达式。

v-if可以和v-else一起使用，但是他们两个要紧挨着，否则会无效！

<div id="app">
        <button v-on:click="change()">控制</button>
        <button v-if="show">按钮</button>
    </div>

    <script src="JS/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                show:false //这里为false,也就是不显示v-if所绑定着的按钮
            },
            methods:{
                change(){
                    this.show=!this.show
                }
            }
        })
    </script>

v-for

v-for:可以实现页面列表渲染，常用来循环数组。

格式：v-for="(数组元素,数组下标)" in 数组

<div id="app">
        <ul>
            <li v-for="(it,ind) in list">{{it}}</li>
        </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
    el:"#app",
     data:{
          list:['数组1','数组2','数组3']
            }
        })
    </script>

v-show

控制标签显示和隐藏（true显示，false隐藏）

组件

书写占位符，占位符的名字不可以和标签名相
temlate中书写页面结构模板中只能有一个根组件(也就是标签)
组件中的数据，需要写成函数的形式。
动态组件就是动态占位符，components 最终被msg的值渲染 msg的值是什么占位符就是什么。在占位符中进行扩展需要书写slot的值，保持和slot的name值一致
子组件和父组件不能直接共享数据(不能直接通信) 同级组件也不能

<div id="app">
    <!-- 书写占位符，占位符的名字不能和标签名相同 -->
    <v-header></v-header>
    <v-con></v-con>
    <!-- <v-footer></v-footer> -->
</div>

<script src="js/vue.js"></script>
<script>
    // 书写组件
    var header={
        // template模板 书写页面结构。类似于之前的html 模板只能有一个根组件（标签）
        template:"<main><h1>头部</h1></main>"
    }
    var con={
        template:"<p>内容</p>"
    }
    new Vue({
        el:'#app',
        data:{

        },
        // 挂载组件
        components:{
            // 占位符：组件
            'v-header':header,
            'v-con':con
        }
    })
</script>

路由（vue-router）

router-link:可以实现页面跳转

格式：<router-link to="/ "> 这里to为跳转地址，且to中必须要带上 /，不然实现不了跳转

router-link 所要渲染的内容需要使用router-view

下面是课堂代码：

<div id="app">
        <!-- 页面跳转 在需要跳转的地方，使用router-link   to跳转地址 自定义-->
        <router-link to="/star">广州 星之光潮领地东方游剧天纪念日</router-link>
        <router-link to="/gz">广州 粤次元嘉年华</router-link>
        
        <!-- 渲染的内容需要使用router-view -->
        <router-view></router-view>
    </div>

    <template id="star">
        <h1>广州 星之光潮领地东方游剧天纪念日 内容</h1>
    </template>

    <template id="gz">
        <h1>广州 粤次元嘉年华 内容</h1>
    </template>

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        var star={
            template:'#star'
        }
        var gz={
            template:'#gz'
        }

        //注册路由
        var router=new VueRouter({
            //配置路线
            routes:[
                {
                    path:'/star',
                    component:star
                },
                {
                    path:'/gz',
                    component:gz
                }
            ]
        })
        new Vue({
            el:'#app',
            //挂载路由 k:v k和v一样 直接省略
            router
        })
    </script>