Vue的基本使用笔记（一）

最新推荐文章于 2022-03-17 00:02:00 发布

起风了ZH

最新推荐文章于 2022-03-17 00:02:00 发布

阅读量122

点赞数 1

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

本文链接：https://blog.csdn.net/zH1_234567/article/details/118540208

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Vue的基本使用

<body>

    <!-- 指定vue 能够控制的Dom对象 -->
    
    <div id="app">{{username}}</div>


    <script src="./lib/vue-2.6.12.js"></script>

    <script>
        //    创建vue实例化对象
        const vm = new Vue({
 
            // el 为固定写法，表示被控制的DOM对象
             //可以控制该对象和该对象内部子元素对象
            el: '#app',

            // data 为固定写法，表示可渲染的数据
            data: {
                username: 'lisi',
                list : [
                            {
                                age : 12,
                                sex : '女'
                            },
                            {
                                age : 12,
                                sex : '女'
                            }
            }

            //methods 为固定写法，定义事件的处理函数
            methods : {
                add(n,e) {
                    //函数体
                }
            },

           // filters 为固定写法，定义过滤器函数
            filters: {

                // val 永远指向管道符前面的那个值，所以在调用过滤器函数时，不需要在过滤器函数中写入实参
                capi(val) {

                    // 过滤器函数中一定要有一个返回值
                    return  值
                }
            }
        })
    </script>
</body>

Vue指令

1.内容渲染指令

v-text = "data"

把数据渲染到该标签内部

【注】会覆盖该标签原本内容

<p v-text = "username"> 原内容  </p>

插值表达式 {{ data }}

相当于模板字符串，起到占位符的作用

【注】不会覆盖原内容，但是不能解析标签

  <p>原内容{{username}}</p>

v-html = "data"

可以解析带标签的字符串

【注】会覆盖原内容

 <p v-html="username">原内容</p>

2.属性绑定指令

v-bind:属性 = "data"

给属性动态绑定值，简写 :

 <input type="text" v-bind:placeholder="tipt">    
    
 <input type="text" :placeholder="tipt">

3.事件绑定指令

v-on:事件类型='data’

简写 @事件类型='data’

<button v-on:click="add">点击</button>

$event 应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event

<button v-on:click="add(n,$event)">点击</button>

事件修饰符：

// .prevnet  阻止提交事件
<a @click.prevent="xxx">链接</a>


// .stop  阻止事件冒泡
<button @click.stop="xxx">按钮</button>

4.双向绑定指令

v-model = "data"

可以直接获取数据源，也可以修改数据源

【注】只能和 input ,textarea, select 这些标签一起使用， v-model的值不能写死，必须使用数据源里的数据

如果把 v-model 绑定给 type='checkbox，则 v-model会控制 checked 属性

如果把 v-model 绑定给其他 input, ,textarea, select, 则 v-model会控制 value属性

<input type="text" v-model="username">

5.条件渲染指令

v-if = "data"

v-show = "data"

当 data的值为 true 时，标签显示，为 false 时，标签隐藏

区别：v-if 每次动态地创建或者删除元素

v-show 每次动态地为标签添加属性 display = none 或 block

v-if 的使用方式

1.直接给定布尔值

<p v-if="true">元素</p>

2.给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

// 如果  数据源==="值"  为 true，则显示标签
<p v-if="数据源==="值"">内容</p>
<p v-else-if="数据源==="值"">内容</p>
<p v-else>内容</p>

6.列表渲染指令

v-for = "（item ,index） in 数据源中的数组"

item 指的是数组中的每一项 , index 指的是数组下标（可选项）

【注】必须与 key 属性一起使用

key 值注意事项

key 的值只能是字符串或数字类型

key 的值必须具有唯一性（即：key 的值不能重复）

建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

<li v-for="item in list" :key='item.id'> 内容 </li>

过滤器

变量 | 过滤器函数

| ：表示管道符，用来调用过滤器

<p> {{ username | capi }} </p>

全局过滤器

// 定义在全局
// capi 表示过滤器函数名
// 第二个参数表示实现的函数 , str 表示接收的 管道符 前面的变量
Vue.filter('capi' , function(str){

        return 值

    }
   )

【注】如果全局过滤器和私有过滤器名字冲突，则优先调用私有过滤器

起风了ZH

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的基本使用笔记（一）

Vue的基本使用<body>  <div id="app">{{username}}</div> <script src="./lib/vue-2.6.12.js"></script> <script> // 创建vue实例化对象 const vm = new Vue({
复制链接

扫一扫