vue基础操作

最新推荐文章于 2023-03-02 10:59:20 发布

原创最新推荐文章于 2023-03-02 10:59:20 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue基础操作

vue

中文官网：

https://cn.vuejs.org/

英文官网：

https://vuejs.org/index.html

1.什么是vue.js?
- vue是一个渐进式的javascript框架
- vue的作者是尤雨溪
- vue是个人项目（react是Facebook的团队项目）
- vue是一个MVVM框架（MVVM是MVC的衍生架构）
- vue是一个单项数据流的框架
vue版本发布时间

Vue 1.x 2014
Vue 2.x 2016

MVC
MVC是一个软件架构思维，它将一个软件分为三部分

M Model 数据
V View 视图
C Controller 控制器
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
通信方式如下：

1.View 传送指令到Constroller
2.Controller完成业务1逻辑后，要求Model改变状态
3.Model将新的数据发送到View，用户得到反馈
如图所示，以上的通信都是单向的
所以称之为 单向数据流

MVC的衍生

MVC backbone 【前端框架】
MVP
MVVM Vue Agular.ts[Angular2.0]
```
        ember
```

backbone

1.用户可以向View发送指令（DOM）事件，再有View直接要求Model改变状态
2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View
3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）。

MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

各部分之间的通信都是双向的
View 与 Model 不发生联系，都通过 Presenter 传递。
View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM

M Model 数据
V View 视图
VM ViewModel 视图模型

V的变化会反应到VM上，反之同理，也就是vm的改变也会影响V

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

vue 的使用

Vue不支持IE8，因为使用了ES5的很多特性( Object.definedPropty)
可以直接通过script标签来引入vue.js，有开发版本和生产版本，开发版本一般我们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本没有压缩的，并且有很多提示，而生产版本全部删掉了
在Vue中提供了一个脚手架（命令行工具）可以帮我们快速的搭建基于webpack的开发环境…（vue cli2 / vue cli3）

端mvc框架
如angularjs，backbone：

用户可以直接操作controller（例如用户更改hash值，conrtoller直接监听hash值变化后执行逻辑代码，然后通知model更改）
控制器可以直接操作view，如果，让某一个标签获得进入页面获得焦点，不需要model来控制，所以一般会直接操作（angularJS，指令）
view可以直接操作model （数据双向绑定）

1.通过script标签引入vue.js

当通过标签引入vue.js时，会在window对象身上挂载一个vue构造函数

var vm = new Vue( options

options中可以写的属性：是官网中api带有选项字眼的属性

https://cn.vuejs.org/

示例用法


<body>
<div id="app">
<p> {{ this.msg }} </p>
<p> {{ this._data.msg }} </p>
<p> {{ this.$data.msg }} </p>
<!-- 简写 -->
<p> {{ msg }} </p>
</div>
</body>

1其中id为app的div是假的DOM只是一个模板
2.el的作用：

为实例vm规定一个使用范围，只能在#app范围内使用
为实例vm提供一个模板
3.data的作用
- 规定一个数据
- data的数据使用范围必须是在#app内
  data中定义的数据在模板中相当于全局变量，可以直接使用，vue中为了能够让我们在模板中石油js语法，它提供了一个语法糖，语法糖叫：mustache，（双大括号语法）

语法糖： {{}}

私有属性【继承属性】

_ # $
表示继承属性

我们把vm作为实例【根组件】、
数据改变，视图改变，不需要刷新页面

<script>

console.log( Vue )
// var vm = new Vue( options )
var vm = new Vue({ // vm 就是 VM 视图模型
el: '#app', // V
data: { // M
msg: 'Hello Vue.js'
}
})
console.log( vm )
console.log( vm.msg )
</script>

Vue源代码

行数：在开发环境里有11945
vue的源代码是通过匿名函数来封装的
- 匿名函数（自调用函数）的好处？
  - 解决了命名冲突
  - 规定了一个地里的作用域
  - 安全性高
    防止 xss和CRSF攻击脚本


(function ( global,factory) {
})( this,function () {})

第一个括号表示定义一个匿名函数
第二个括号表示调用这个函数


参数： 第一个括号中的参数为 形式参数
第二个括号中的参数为 实际参数


this - 指的就是window对象
factory - 工厂函数 返回值就是Vue构造函数
el不能是body
Vue是通过面向对象原型继承 + 工厂函数进行底层代码封装的

es5 es6 amd可以通过命令安装vue框架

vue 的指令

1.vue有指令和组件系统两个大功能
2.vue通过指令操作DOM

数据展示的两个指令：
1，v-html：非转义输出（可以解析标签）
2.v-text：不能解析标签

写数据：
<script>
new Vue({
el: '#app',
data: {
msg: '<div> hello Vue.js</div>',
}
})
</script>

用数据：
<div id="app">
<div class="container">
<h3> 数据展示 </h3>
<p> {{ msg }} </p>
<p v-html = "msg"></p>
<p v-text = "msg"></p>
</div>
</div>

条件渲染的指令

v-if
v-else-if
v-else

条件分支分为：
1.单路分支 v-if
2.双路分支 v-if v-else
3.多路分支 v-if v-else-if v-else

flag: false,
flag1: true,

<h3> 条件渲染 </h3>
<h4> 条件渲染 - 单路分支 </h4>
<p v-if = "flag"> 条件 - 单路分支 </p>

条件展示
1.v-show 在页面表现上他和单路分支没有明显区别
条件展示和单路分支的区别：

v-show:控制的是dom的dislay：none属性
v-if：是真正的控制dom的存在与否
当初始条件都为false的时候，v-if会惰性渲染（不渲染）v-show不管条件是什么都会渲染，所以v-show的初始渲染开销较高
如果需要频繁切换切换flag，使用v-show 反之使用 v-if

列表渲染

v-for

1.数组的渲染

v-for=“（item，index）in lists”
item：元素
index：下标


<ul>
<li v-for="(item,index) in lists">
{{item}}
<!-- item 元素
index 下标 -->
</li>
</ul>

对象渲染

v-for="(item,key,index) in obj"
item：每一个属性的属性值
key：每一个属性
这里的 key和item是键值对的存在
index：下标


<ul>
<li v-for="(item,index,key) in obj">
{{item}}--{{index}}--{{key}}
<!--
1--id--0
lisa--name--1
18--age--2
-->
</li>
</ul>

json渲染

v-for="(item,index) in json"
item：json数组中的对象
对象可以链式调用里面的属性
index：下标


<ul>
<li v-for="(item,index) in json">
<p>商品名:{{item.shopName}}</p>
</li>
</ul>

二级渲染


<ul>
<li v-for="item in banner">
<p>{{item.name}}</p>
<ul>
<li v-for="elm in item.child">
{{elm.name}}
</li>
</ul>
</li>
</ul>

banner: [{
id: 1,
name: 'huahua',
child: [{
id: 1,
name: 'huahua111'
}]
}, {
id: 2,
name: 'huahua',
child: [{
id: 1,
name: 'huahua2222'
}]
}, {
id: 3,
name: 'huahua',
child: [{
id: 1,
name: 'huahua3333'
}]
}, ]