vue基础笔记01

最新推荐文章于 2022-10-15 16:31:41 发布

庚中

最新推荐文章于 2022-10-15 16:31:41 发布

阅读量245

点赞数 1

分类专栏：十二.vue 文章标签： vue基础笔记01

本文链接：https://blog.csdn.net/xiaodi520520/article/details/87617551

版权

十二.vue 专栏收录该内容

60 篇文章 6 订阅

订阅专栏

一.vue看官网总结(自学):

1.VUE不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构(文本如{{}},特性如v-bind)。此外，Vue 也提供一个强大的过渡效果系统;
2,v-for 指令可以绑定数组的数据来渲染一个项目列;
3.toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
4.vue绑定元素特性的案例:

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
}

效果如下:
在这里插入图片描述
解释:message的内容会同步到html里，同时页面也会显示时间,因为title属性的作用是在鼠标移到该元素上时显示一段提示文本。
5.操作dom结构案例:

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

以上总结一句话:不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构

二.慕课网学习总结

1.挂载点,模板和实例之间的关系

挂载点:就是vue实例el对应要操作的Dom元素;
模板:在挂载点内部的内容我们称之为模板;
vue实例:自动会寻找对应的挂载点和读取模板,最终渲染页面.
模板补充:模板有两种写法:
模板的第一种写法:直接在dom元素里写(这种写法比较直观,个人看起来比较舒服)
在这里插入图片描述
模板的第二种写法:也可以直接写在vue实例的dom元素里

2.实例中的数据,事件和方法

1.在html中插入的语法叫做插值表达式
在这里插入图片描述
上面的写法也可以用v-text属性来表示,效果一致

<div v-text="number"></div>

胡子里面也可以写方法调用,操作如下:
在这里插入图片描述
同上,还有一个v-html指令也是来显示页面属性的,v-text和v-html指令区别:
v-text:只会编译文本;
v-html会编译html标签;

2.事件和方法使用如下

3.Vue中的属性绑定和双向数据绑定

1.title属性绑定案例:如果div里直接写title=“title”,它只会编译成字符串,v-bind:可以简写为:
在这里插入图片描述
注意:属性绑定之后v-bind:title=“内容”,这里的内容变成了js表达式,比如可以拼接字符串

2.双向数据绑定
先了解普通标签的单向数据绑定,单向数据绑定的意思是vue中的数据可以改变页面内容,但是页面内容无法改变vue中的数据;
而双向数据绑定:vue中的数据不仅能够改变页面内容,页面中的内容也能改变vue中的数据.
在这里插入图片描述
添加v-model属性可以实现双向数据绑定

4.计算属性和侦听器

1.计算属性:只有页面数据发生改变的使用才会触发
当html中的胡子数据需要将data里的数据进行计算后再渲染时,就可以使用计算属性,操作方式是:使用vue实例里的computed属性,它后面跟一个对象,在对象里定义一个自己命名的名字,后面跟上一个函数,在函数里将计算好的数据进行返回出来,在页面中重新渲染即可.

代码如下:

<body>
    <div id="root">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
       <!-- <div> 合:{{firstName}}{{lastName}}</div> -->
       <div>{{fullName}}</div>
       <!-- 计算属性:上面这个代替前面的 -->

    </div>
    <script src="./00-vue.js"></script>
    <script>
    new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:""
        },
        computed:{ 
            fullName:function(){
                return this.firstName+this.lastName
            }
        }
    })
    </script>
</body>