一:概述

Vue是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关心视图层,不仅易于上手,还便于与第三方库或既有项目整合。

Soc:

Html+Css+Js    视图:给用户看,刷新后台给的数据

网络通信:axios

页面跳转:vue-router

状态管理:vuex

Vue-UI:ICE

二:第一个VUE程序

<body>
<div id="app">
//这里直接就显示数据
{{message}}
</div>
<script>
var vm=new Vue(
//el绑定标签,data是指数据
el: "#app",// 设置当前vue对象要控制的标签范围
data;{// data是将要展示到HTML标签元素中的数据。
message: "hello,vue"
});
</script>
</body>

Vue有七大对象:el,data

Vue就是一个实现了MVVM的

为什么要使用MVVM

MvvM模式和MVC模式一样,主要目的是分离视图View和模型Model,有几大好好处

·低耦合:视图View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

·可复用:你可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑

·独立开发:开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面设计。

·可测试:界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

三:Vue的基本语法

v-bind

我们已经成功创建了一个Vue应用,看起来这跟渲染一个字符串模板非常类似,但是Vue在背后做了大量的工作。现在数据和Dom已经被建立了关联,所有东西都是响应式的。我们在控制台操作对象属性,界面也可以实时更新。

我们还可以使用v-bind来绑定元素特性。

<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒中查看此处动态绑定的提示信息
</span>
</div>
<script>
var vm=new Vue(
//el绑定标签,data是指数据
el: "#app",
data;{// data是将要展示到HTML标签元素中的数据。
message: "hello,vue"
});
</script>
</body>

你看到的v-bind等被称为指令。指令带有的前缀v-,以表示他们是Vue提供的特殊特征。可能你已经猜到了,他们会在渲染的DOM上应用特殊的响应式行为。在这里,该指令的意思是:‘’将这个元素节点的title特性和Vue实列的message属性保持一致”

如果你再次打开浏览器的JavaScript控制台,输入app.message=‘’新消息”,就会再次看到这个绑定了title特性的html已经进行了更新。

v-if,v-else

什么是条件判断语句,就不需要我们所明了吧,一下俩个属性!

·v-if

<body>
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">C</h1>
<h1 v-else>C</h1>
</div>
<script>
var vm=new Vue(
//el绑定标签,data是指数据
el: "#app",// 设置当前vue对象要控制的标签范围
data;{// data是将要展示到HTML标签元素中的数据。
type:'A';
});
</script>
</body>

·v-else

<body>
<div id="app">
<li v-for="item in items">
//这里的item in items就好比我们的for each一样,这里的item就是底下的一个
{{item.message}}
</li> </div>
<script>
var vm=new Vue(
//el绑定标签,data是指数据
el: "#app",// 设置当前vue对象要控制的标签范围
data;{// data是将要展示到HTML标签元素中的数据。
items:[
{message: '123'},
{message: '456'},
{message: '789'},
]
});
</script>
</body>

四:Vue绑定事件

v-on

<body>
<div id="app">
<button v-on:click="zph">click me</button>
</div>
<script>
var vm=new Vue({
//el绑定标签,data是指数据
el: "#app",// 设置当前vue对象要控制的标签范围
data:{// data是将要展示到HTML标签元素中的数据。
message:'123'
},
methods: {//方法必须定义在Vue的Methods对象中,v-on事件
zph: function (event) {
alert(this.message)
}
}
});
</script>
</body>

Vue的7个属性,8个方法,7个指令。787原则。

·el属性  用来指示vue编译器从什么地方开始解析vue的语法,可以说是一个占位符。

·data属性 用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。

·template属性 用来设置模板,会替换页面元素,包括占位符。

·render属性 创建真正的Virtual Dom

·watch属性  watch: function(new ,old){}  监听data中数据的变化    俩个参数,一个返回新值,一个返回旧值

五:Vue 表单双绑,组件

①.什么是双向数据绑定

Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。

②为什么要实现数据的双向绑定

在vue.js中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI空间来说,对于我们处理表单,Vue.js的双向数据绑定用起来就特别舒服了。即俩者并不互斥,在全局性数据流使用单向,方便跟踪;局部性数据流使用双向,简单易操作。

③在表单中使用双向数据绑定

你可以用v.model指令在表单<input> ,<textarea>即<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以及更新数据,并对一些极端场景进行一些特殊处理。

注意:v-model 会忽略所有表单元素的value,checked,selected特性的初始值而总是将Vue实列的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

<input>

<body>
<div id="app">
<input type="text" v-model="message" > {{message}}
</div>
<script>
var vm=new Vue({
//el绑定标签,data是指数据
el: "#app",
data;{
message:'123'
},
});
</script>
</body>

六:Vue的组件

后续+

Vue(1)的更多相关文章

  1. 一步一步学习Vue(六)

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  2. 一步一步学习Vue(十一)

    本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var ...

  3. vue(9)—— 组件化开发 - webpack(3)

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  4. vue(8)—— 组件化开发 - webpack(2)

    webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack( ...

  5. vue(2)—— vue简单语法运用,常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  6. 一步一步学Vue(六)

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  7. 下载vuejs,Hello Vue(vscode)

    下载vuejs,Hello Vue(vscode) Hello Vue 下载使用vue.js 动图演示 Vue的基本使用步骤  传送门:https://cn.vuejs.org/v2/guide/in ...

  8. 一步一步学Vue(九) 路由元数据

    一步一步学Vue(九):https://www.cnblogs.com/Johnzhang/p/7260888.html

  9. 一步一步学Vue(六)https://www.cnblogs.com/Johnzhang/p/7242640.html

    一步一步学Vue(六):https://www.cnblogs.com/Johnzhang/p/7237065.html  路由 一步一步学Vue(七):https://www.cnblogs.com ...

  10. vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比

    vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各 ...

随机推荐

  1. SpringMvc获取getbean

    import org.apache.commons.lang3.Validate; import org.slf4j.Logger; import org.slf4j.LoggerFactory; i ...

  2. 在阿里云服务器上(centos 8) 安装自己的MQTT服务器 (mosquitto)

    layout: post title: 在阿里云服务器上(centos 8) 安装自己的MQTT服务器 (mosquitto) subtitle: date: 2020-3-2 author: Dap ...

  3. 四. SpringCloud负载均衡与调用

    1. Ribbon概述 1.1 Ribbon是什么 SpringCloud Ribbon是基于Netflix Ribbon实现的一套客户端,是负载均衡的工具. Ribbon是Netflix发布的开源项 ...

  4. 【洛谷 p3372】模板-线段树 1(数据结构--线段树)

    题目:已知一个数列,你需要进行下面两种操作:1.将某区间每一个数加上x:2.求出某区间每一个数的和. 解法:如题,模版题.需要加上 lazy 标记,也就是我的 upd.lazy 标记的思路就是对一个结 ...

  5. Java 窗口 绘制图形 #1

    写在前面: editplus换成eclipse了 Sketchpad要钱,买不起 自己搞(rua) by emeralddarkness 建立了一个平面直角坐标系 两个变元x,y,参数i 实现了以下功 ...

  6. Mac下anaconda的安装和基本使用

    Mac下anaconda的安装和基本使用 安装 在conda官网下载安装conda. 打开terminal输入conda -V,回车显示conda的版本说明安装成功. 将conda更新到最新版本 co ...

  7. httprunner(9)运行测试用例的方式总结

    前言 用过pytest的小伙伴都知道,pytest的运行方式是非常丰富的,可以说是你想怎么运行怎么运行,想运行哪些运行哪些,那httprunner是否同样可以呢? 运行用例的各种方式 运行指定路径的用 ...

  8. Chapter Zero 0.2.3 显示适配器

    显示适配器(Video Graphics Array,VGA) 不看后悔!!深入了解显卡!!!走你! 我们常常会调试显示器的分辨率,一般对于图像的显示重点在于分辨率与颜色深度, 每个图像显示的颜色会占 ...

  9. Verilog基础语法总结

    去年小学期写的,push到博客上好了 Verilog 的基本声明类型 wire w1; // 线路类型 reg [-3:4] r1; // 八位寄存器 integer mem[0:2047]; // ...

  10. Linux cp command All In One

    Linux cp command All In One $ man cp $ cp -h # 强制 $ cp -f # 递归,复制文件夹 $ cp -r demos cp -fr # ./folder ...