vue基础

一、什么是vue

vue是一个基于JavaScript的渐进式前端开发框架

使用目的：提高前端项目的开发效率、运行性能

优点：

        开发效率非常高、代码规范非常好、引入体积小、语法简单、运行效率高、数据双向绑定

二、第一个vue应用

 <div id="app">
        //在id = app的div中输出一个文本数据
        {{message}}
    </div>
        //开发环境版本，包含了有帮助的命令行警告
    <script src="./vue.js"></script>
    <script>
        //创建vue实例，定义数据
        const vm = new Vue({
            //el:element 缩写，表示标签的意思，将vue实例和id = app的标签关联起来
            el: "#app",
            //data:数据的意思，实例/id = app的标签，内部有个对象数据，包含了message变量
            data: {
                
                message: "HELLO VUE!!"
            }

        })
    </script>

页面展示

 

 三、基础语法

1、常见的vue选项都包含（了解）:

el:element缩写，表示标签的意思，描述了vue实例和网页中的那个标签进行绑定

data:数据的意思，表示实例中包含的所有数据

props:properties的缩写，表示实例/绑定标签的属性

watch:监听器，专门用来监视实例中某些变量中是否发生了数据变化

computed：计算属性，专门用来对实例中的某个特定数据进行自动运算

methods:方法，函数的意思，专门用来在实例中声明函数

components:组件，封装可以重用的代码块

filters:过滤器，封装条件过滤数据的函数

...

vue应用，本质上就是通过vue实例对象，控制整个前端项目中数据的业务处理（数据的展示，数据的样式...）

---实例对象的核心:常见的各种key:value键值对的选项，在学习的过程中通过代码案例逐步掌握

2、插值表达式

-----用来在hmtl视图页面中，输出数据的特殊语法

-----固定语法格式 : {{变量名称}},也称为mastach语法

 <div id="app">
        <!-- 普通字符串 -->
        <p>{{message}}</p>     
        <!-- 模板字符串 -->
        <p>{{info}}</p>
        <!-- 拼接字符串 -->
        <p>{{"你好" + welcome}}</p>
        <!-- 自定义函数的使用 -->
        <p>{{myreverse(welcome)}}</p>
        <!-- 三目运算符 -->
        <p>{{ year > 2021 ? "新技术":"旧技术"}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                message:"回眸一笑百媚生",
                info:`六宫粉黛无颜色`,
                welcome:"Hello Vue!",
                year:2021
            },
            methods:{
                myreverse(str){
                    // 字符串反转
                    return str.split("").reverse().join("")
                }
            }
        })
    </script>

 页面展示：

 3、指令

----生活中的指令，指代是带有方向指导性的命令

----计算机中的指令描述的是带有数据功能性处理的一段可执行命令的集合

----vue中的指令，实现了特定功能的一种固定语法，一般以v-符号开头，如v-text

（1）v-text/v-html/v-once

 <div id="app">
        <!-- 插值表达式 -->
        <p>{{msg}}</p>
        <p v-text = "msg"></p>
        <p v-html = "msg"></p>
        <p v-once>输出数据：{{msg}}</p>

    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                msg:"<h1>明月几时有，把酒问青天</h1>"
            }
        })
    </script>

页面展示： 

 (2)v-show/v-if

-----根据条件判断，是否渲染指定数据

v-show：通过变量控制dsiplay:none/block完成数据的在显示/隐藏

v-if:通过变量控制是否渲染加载DOM结构完成数据的隐藏/显示

  <div id="app">
        <p v-show = "seen">六王毕，四海一</p>
        <p v-if = "seen">蜀山兀，阿房出</p>

    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                seen:true
            }
        })
    </script>

页面展示：

 （3）v-if/v-for

----程序流程控制结构、选择结构、循环结构

<div id="app">
        
        <h3>v-if指令：选择结构</h3>
        <p v-if = "user === 0">游客</p>
        <p v-else-if = "user === 1">会员</p>
        <p v-else-if = "user === 2">管理员</p>
        <p v-else>异常</p>

        <hr>
        <h3>用户权限描述：</h3>
        <ul>
            <li v-for = "up in userPermission">{{up.intro}}</li>
        </ul>

    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                user:2,   //0 游客 1 会员 2 管理员
                userPermission:[
                    {id:4,name:'read',intro:"查看文章"},
                    {id:3,name:'publish',intro:"发表文章"},
                    {id:2,name:'edit',intro:"编辑文章"},
                    {id:1,name:'delete',intro:"删除文章"},
                ]
            }
        })
    </script>

页面展示

 

 （4）v-bind

----操作标签属性对象

----缩写为   “  ： ”

---- for循环指令，数据渲染时，必须通过key属性将数据和视图进行一一绑定，否则会影响页面视图的更新（认识即可）

 <div id="app">
        <h2>v-bind操作属性标签</h2>
        <img :src="image_src" alt="">
        <!-- <img src="./images/1.jpg" alt=""> -->
        <ul>
            <li v-for = "img in image_list" :key = "img.id">
                <img :src="img.image_src" alt="">
                
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                image_src:"images/1.jpg",
                image_list:[
                    {id:3,image_src:"images/4.jpg"},
                    {id:2,image_src:"images/3.jpg"},
                    {id:1,image_src:"images/2.jpg"}
                ]

            }
        })
    </script>

页面展示：

（5）v-on

----给指定标签绑定对应的事件

----缩写为"   @  "

<div id="app">
        <button v-on:click = "changeImg">更换图片</button>
        <img :src="image_src" alt="" style = "width: 100px; height: auto;">
        
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                image_src:"images/1.jpg",
            },
            methods:{  //vue实例中定义函数
                changeImg(){
                    // 更换图片，不需操作DOM操作，只需更新变量数据即可
                    this.image_src = "images/2.jpg"

                }
            }
        })
    </script>

 页面展示：