Vue 基础 _1

最新推荐文章于 2023-05-17 19:46:30 发布

qq_39130700

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量116

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_39130700/article/details/89370994

版权

Vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

介绍

作者游雨溪现任阿里weex(访问原生设备的库)研究团队顾问,Vue是属于他的个人项目
Vue.js目前适用于中小型项目,
它是一个前端的js渐进式(越学越难),MVVM框架,于2016年10月份正式发布
借鉴了react和angular,与司徒正美的avonlon.js很类似
vue.js 的数据也是单向的,即单向数据流
不兼容ie8及其更低版本浏览器

安装使用

下载
- cdn https://cdn.bootcss.com/vue/2.6.10/vue.js
- 本地保存 vue.js文件,多次复用
- 模块化安装
  - npm install vue -d/-s
  - yarn
引入
初始化
1. 必须有一个html容器(不能为body或html标签)
 
 <div id="app"></div>
2. 初始化
new Vue(options)

* el 表示装载，将上面id为app的模板装载在 new Vue的实例中，也确定了一个作用范围

* data 数据

注意：

学习vue.js即要学习配置项 && api
1. 数据绑定（声明式渲染）
 注意事项：
 
 模板中的 this 指的是 new Vue得到的实例，在模板中 this可以省略不写
```
 			 {{ this.$data.msg }} 

 			 {{ this.msg }} 		
```

    				   <p> {{ msg }} </p>  推荐的

2. data选项在根实例中是对象，除了跟实例以外是函数

基础语法

vue.js源代码使用了匿名函数 (function(){})()
1. 特点
  - 安全性高
  - 减少了函数命名冲
  - 第二个括号才是函数的真正运行，里面可以传入实际参数
  - 第一个括号确定了匿名函数的作用范围，语法不会报错，里面放一个没有名字的函数，函数可以接收形式参数
2. 底层代码封装
  - 确定vue.js这个库的使用方法
  - 直接将Vue当做全局的一个方法使用，因为将Vue挂在了 window
  - 使用了amd来定义vue.js这个库为一个模块，这样我们才能模块化引入
musttauch语法糖; {{ }}
1. alert console.log 不能用 (除了这两个方法外，其他的挂载在window上的方法也不能用)
2. if条件改成使用三元表达式
3. 方法一定要写在methods里面，不要直接写在模板语法中
4. 模板语法中支持使用匿名函数可以直接写
列表渲染
v-for指令
v-for = " xxx in data "
{{ xxx }}
如果需要索引 index
v-for = "(item,index) in data "
{{ item }} — {{ index }}

对象：
v-for = “(index,item,key) in obj”

总结:
1. v-for 最多可以有三个参数
2. 格式
  v-for = “(index,item,key) in data”
  名词解释：
  index: 索引
  item； data中的每一个
  key；如果是对象，表示对象的key
3. v-for如果有循环嵌套，那么value可以写成一样的命名，但是我们建议大家写成不一样的命名，理由：比较语义化
4. v-for 可以循环数字或是一个字符
条件渲染

两种：
1. v-if
- 单路分支
```
 
 true
 
```
- 双路分支
```
 
 true
 
 
 false
 
```
- 多路分支
```
 A 
 
 B 
 
 C 
```
1. v-show
```
```javascript

 
 
 if条件
 
```
```
1. v-if vs v-show
 1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
 2. 性能
 - 如果条件为假，v-show有较高的初始渲染开销
 - v-if 有更高的切换开销
 项目中建议：
 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
事件
- vue的事件使用在标签添加属性的方法 —v-on
- 格式:
  
  v-on:eventType = eventFnName
- 简写:
  
  @eventType = eventFnName
- 事件函数应该写在配置项methods中
- 不传入自定义参数时,默认参数为event,传入自定义参数,则需要使用$event来指定为event
- 事件修饰符
  
  通过在绑定事件时在事件类型后面通过"."绑定事件修饰符,来进行阻止事件冒泡等行为;
  
  例:
  
  v-on:click.stop=eventFn()
  
  .stop : 阻止冒泡行为
  
  .prevent ：阻止浏览器默认行为
  
  .capture ：阻止捕获行为
  
  .self ：自身触发
  
  .once ：只执行一次
  
  .passive ：行为结束后触发（scroll）
- 按键修饰符
  
  使用方式与事件修饰符一样
  
  用于检查详细的按键,只有当按键为指定按键时调用
  
  为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
  
  .enter
  .tab
  .delete (捕获“删除”和“退格”键)
  .esc
  .space
  .up
  .down
  .left
  .right
- 系统修饰符
  - 可以使用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
    
    .ctrl
    .alt
    .shift
    .meta
    
    在出发时,修士键必须处于按下状态再释放指定按键才能触发事件
    - 其它详情查看Vue官网()并补齐
单项和双向数据绑定
单项数据绑定
- 将数据和属性进行绑定,也就是属性上的属性值就是数据,即数据更改,视图就更新
- 写法:v-bind:attr = data
- 简写::attr = data
双向数据绑定
- 数据改变,视图更新.视图改变,数据也会更新
- 写法:v-model:attr=data
- 简写:v-model=data
- 强调:v-model用于表单， v-model默认绑定了value属性

案例:使用单项数据绑定实现双向数据绑定

<body>
  <div id="app">
    <input type="text" v-bind:value = "msg" @input = "inputHandler">
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello vue'
    },
    methods: {
      inputHandler(e){
        // console.log( e )
        this.msg = e.target.value
      }
    }
  })
</script>

总结：
1. 数据修改了，视图就会更新，这个现象就叫做，数据驱动视图渲染
2. Vue是由两大内容构成
3. 指令
4. 组件
5. vue中使用v-xxx来表示一个指令，这个指令写在标签的属性中
4. 属性中不写 mustache语法，内部中要写的

		6.  如果 new Vue(options)如果没有el选项， 那么我们可以手动进行模板装载， 

	new Vue().$mount('#app')

qq_39130700

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 基础 _1

介绍作者游雨溪现任阿里weex(访问原生设备的库)研究团队顾问,Vue是属于他的个人项目Vue.js目前适用于中小型项目,它是一个前端的js渐进式(越学越难),MVVM框架,于2016年10月份正式发布借鉴了react和angular,与司徒正美的avonlon.js很类似vue.js 的数据也是单向的,即单向数据流不兼容ie8及其更低版本浏览器安装使用下载cdn ...
复制链接

扫一扫

专栏目录