vue的基本使用和指令

今天针对vue基本的使用和指令展开了学习，学习内容如下：

1.vue实体对象的创建：

html 复制代码

<body>
    <!-- 
        创建Vue实例，初始化渲染
        1. 准备容器 (Vue所管理的范围)
        2. 引包 (开发版本包 / 生产版本包) 官网
        3. 创建实例
        4. 添加配置项 => 完成渲染
    -->
    <!-- Vue所管理的范围 -->
    <div id="app">
        <!-- 这里将来会编写一些用于渲染的代码 -->
        {{msg}}
    </div>
</body>
<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="js/vue.js"></script>
<script>
     // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
    const vue = new Vue({
        // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
        el:'#app',
        // 通过 data 提供数据
        data:{
            msg:'hello world'
        }
    })
</script>

2.vue实体对象的基本组成部分：

el：表示作用范围的选择器；

data：表示定义的一些变量；

methods：定义的一些方法；

3.在data对变量进行初始化的时候用:，而在方法中对于变量的赋值使用=，创建也用=

4.通过在HTML标签中加：

（1）v-show和v-if：进行DOM的显示和隐藏，区别在于v-show是控制的display:none,而v-if是销毁和创建的一个过程，因此我们在频繁需要改变显示和隐藏状态的情境下选用v-show,在不经常改变状态的位置选用v-if；

（2）v-else和v-else-if：就是简单的条件筛选；

（3）v-on：用于事件的处理,后面可以加表达式，方法，可以简写为@；

（4）v-bind：用于动态设置html标签的属性比如：src、url、title，可以简写为:

（5）v-for指令：v-for = "(item,index) in 数组" item是遍历的元素 index是下标。当前页可以省略遍历下标。省略 index的写法： v-for = "item in 数组"，一般需要在后面加 :key=,key用于给表项添加唯一标识，便于vue进行列表项的正确排序复用；

（6）v-model：双向绑定作用，一般用于绑定表单数据：input、radio、select可以快速的获取或者设置数据；

以上就是我今天的学习内容