黑马前端学习笔记（从vue2.0到vue3.0）第三天P33-P52

P33了解vue

vue是一款框架

P34vue两个特性（面试）

    1.数据驱动视图

        vue监听页面的变化自动渲染到页面结构

    2.双向数据绑定

        开发者不操作DOM的前提下自动将数据同步到数据源

P35 MVVM

viewModel也就是VUE

Model 数据源

view 页面结构

P36 vue初步使用

没有lib资源 不要着急

输入

https://cn.vuejs.org/v2/guide/installation.html?

下载下来为vue.js 如果你怕出现各种bug 可以名字改为和老师一样

你首先建立一个day02文件夹 在文件cmd打开黑窗口输入

npm install bootstrap@3

他会将bootstrap.css文件下载入node_modules

直接搜索bootstrap.css 复制出来 

dayjs.min.js 也是如此 在黑窗口中输入

npm install dayjs --save

接着在node_modules搜索出dayjs.min.js 

他会多出很多保存依赖的文件夹直接全部删除确保和老师的一模一样

 

vue固定语法

P38内容渲染指令

P38内容渲染指令

v-text ：一般都是覆盖标签中原本内容

{{}} ： 差值表达式  专门解决 text覆盖问题 只能用在元素内容中

         在差值中可以做简单的计算

v-html：可以把标签渲染出来例如<p><span>

P40属性绑定指令

 v-bind：可以动态绑定值 可以简写为：

P42事件绑定指令 

v-on：click=“ ” 鼠标单击事件

   methods：定义事件处理函数 

可以用vm 调用到 data里面的值  相等于this

在绑定调用方法的时候 可以加小括号（）进行传参

简写为 @ 

当点击时候不传入参数时候 也就是不写小括号  可以接收到按钮对象  根据他可以操作按钮的DOM  

当有小括号时 传入的参数就是写入的参数 

如果你还想参错按钮的DOM 可以传参时候加入 $event 这是固定写法 （不常用）

P48事件修饰符

在事件绑定指令中 用接受的默认参数.preventDefault（） 阻止需求

但是字母太长 可以在点击时候直接写@click.prevent效果一样

P50按键修饰符

  v-on：keyup.esc  按ESC触发某个方法 例如清空或者回退 

e.target.value= '' 即可清空内容

v-on：keyup.enter按下回车出发某个方法

P51双向绑定指令

v-model 更改v-model的值 数据源会发成变化 与v-bind不同 

v-bind数据只会随着数据源变动而变动 

只有表单元素才能使用v-model 例如 1.input 2.textarea 3.select

P52双向绑定修饰符

在输入框中有时候输入的值会转换成字符串 

v-model.number 会在输入的时候先转换为数字

v-model.trim 自动过滤用户输入的首尾空白字符

v-model.lazy 在对话框失去焦点后才会改变数据源  ---“ 懒”

要学习东西少 原理比较多 多看看多记