vue入门

最新推荐文章于 2024-07-01 17:56:59 发布

前端韭菜

最新推荐文章于 2024-07-01 17:56:59 发布

阅读量95

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_36483750/article/details/103432177

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

vue入门

什么是vue?

是一套用于构建用户界面的渐进式框架。
vue的安装

官网有详细的安装介绍
https://cn.vuejs.org/v2/guide/。
vue的挂载点、模板以及示例

vue只会处理挂载点下面的内容

模板是指挂载点内部的内容

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue入门</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
    <!--比如下面这个标签就是挂载点，js代码中的el所指定的就是挂载点-->
    <div class="demo">
        <!--下面的内容就是模板，这是模板的一种书写方式，还有一种是写在script内的-->
        <h1>hello word</h1>
    </div>
    
    </body>
    
    <script>
    //模板是指挂载点内部的元素
        new Vue({
            el:".demo",
            <!--模板的另一种表现方式-->
            template:"<h1>hello word</h1>"
            data:{
                msg:"hello world"
            }
        })
    </script>
    
    </html>

vue实例中的数据，事件和方法

数据绑定使用插值{{}}双大括号的方法；事件以及方法和微信小程序的使用相似，具体事件查看官网https://cn.vuejs.org/v2/guide/syntax.[/](https://cn.vuejs.org/v2/guide/syntax.html)

属性绑定v-bind,简写:bind     数据的双向绑定v-model

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue入门</title>
    <script src="vue.js"></script>
</head>
<body>
<div class="demo">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName">
    
    <!--不计算属性-->
    <div>{{firstName}}{{lastName}}</div>
    
    <!--计算属性-->
    <div>{{fullName}}</div
    
    <div>{{count}}</div>
    
</div>
</body>
<script>

    new Vue({
        el:".demo",
        data:{
            firstName:"",
            lastName:"",
            count:0,
        },
        
        <!--计算属性-->
        computed:{
            <!--计算属性的函数名就指的是要计算得到的属性名称-->
            fullName:function(){
                return this.firstName + "" + this.lastName;
            }

        },
        
        <!--侦听器-->
        <!--实例功能：侦听fullName的改变，使count的值增加-->
        watch:{
            fullName:function(){
                this.count++
            }
        }
    })
</script>
</html>

v-if指令 :用于条件性地渲染一块内容
v-show指令 :显示隐藏
v-for指令：循环渲染，如遍历数组

创建自定义组件

vue的每一个组件都是一个实例

    <!--html代码-->
    <div>
         <!--:content给组件传值-->
         <div-list :content="item"></div-list>
    </div>
    
    <!--js代码-->
    Vue.component("div-list",{
        <!--props接受传值-->
        props:["content"]
        <!--template:"<li>name</li>"-->
         template:"<li>{{content}}</li>"
    })
    <!--最后在页面展示出name-->
    
    <!--局部组件定义-->
    var divList = {
        template: "<div>names</div>>"
    };
    new Vue({
        el:".demo",
        
        <!--局部组件定义-->
        components:{
           "div-list":divList,
        },
        
        data:{},
        computed:{},
        watch:{}
    })