vue.js基础知识

<script>
    // 实例化vue 
    let vm = new Vue({
        // 控制区
        el: "#app",
        // 存放数据
        data: {
            msg: "hello vue",
            age: 18,
            html: ' <a href="">我是连接标签</a>'
        },
        // 存放方法
        methods: {

        }
    })
</script>

五、插值表达式、v-text、v -html

1、差值表达式{{}

展示数据，进行简单的运算

2、v-text、v-html
v-text：类似于js中的innerText覆盖元素中的内容
v-html：类似于js中的innerHTML，可识别富文本

3、v-text和v-html的异同
相同点：都会覆盖元素
不同点：v-html可以解析富文本；

v-text：不能解析富文本

六、v-bind v-on

v-bind 元素的属性绑定简写 :

v-on 元素事件的绑定简写 @

七、事件修饰符、v-model数据双向绑定

1、事件修饰符

.stop 阻止冒泡：阻止事件继续向外传播

.capture 添加捕获模式

.self 当事件作用于本身的时候触发

.once 事件只会触发一次

.prevent 阻止默认事件

2、v-model数据双向绑定

v-model 数据双向绑定；绑定表单控件

数据双向绑定的原理：

是采用数据劫持结合发布者-订阅者模式的方式，

通过Object.defineProperty()来劫持各个属性的setter，getter，

在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

八、Vue中样式的使用

1、使用class样式

1、数组 :class=“[class1,class2]”
2、三目表达式 :class=“age<18?class1:class2”
3、对象 :class{red:ture}
对象的键是属性的名字，值是Booleam类型
4、数组内置对象 :class=“[{‘red’:true},{fs30:false}]”

11.2、使用内联样式

1、直接写在元素上通过:style的形式，书写样式对象

<div :style="{color : 'red','font-size' : '30px'}">

2、将样式对象，定义到data中，并直接引用到:style中

<body>
 <div id="app">
 <div :style=style1>红⾊字体</div>
 <div :style=style2>字号30px、字体加粗</div>
 </div>
</body>
<script>
 let vm = new Vue({
 		el: "#app",
 		data: {
 			style1: 'color:red',
 			style2: {
 				fontSize: "30px",
 				"font-weight": 700
 						}
 				},
		 methods: {}
 })
</script>

3、在:style中通过数组，引用多个data上的样式对象
4、在:style 中通过函数返回对象

九、V-for和key属性

1、 v-for

1、遍历数组

<!-- 1、遍历数组 -->
        <div v-for="(item1,index1) in list" :key="item1">
            <!-- item 数组中的每一个元素  index:索引 -->
            {{item1}}==={{index1}}
        </div>
        <div v-for="item in list">
            <!-- item 数组中的每一个元素  index:索引 -->
            {{item}}
        </div>

 <!-- 2、遍历对象 -->

        <div v-for="(value,key,index) in obj">

            {{value}}=={{key}}=={{index}}

        </div>

 <!-- 3、遍历数字 -->

        <div v-for="num in 5">

            <div>免费</div>

        </div>

2、key的作用：

提高重排效率，就地复用 (diff算法)

注意点：必须是数字或者字符串必须是唯一值

十、v-if与v -show（显示隐藏元素）

v-if和v-show的异同：

相同点：显示和隐藏元素

不同点：v-show： display：none显示和隐藏元素

v-if：通过删除dom元素

应用场景：

只修改一次的时候可以使用v-if，

频繁切换的时候可以使用v-show

任朝一十六

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js基础知识

核⼼理念：数据驱动视图，组件化开发是⼀套⽤于构建⽤户界⾯的渐进式框架。是以⾃底向上逐层应⽤，Vue 的核⼼库只关注视图层。
复制链接

扫一扫