索引

一、认识
二、入门
三、指令
- v-text
- v-html
- v-on
- v-show
- v-if
- v-bind
- v-for
- 键盘回车事件
- v-model
四、组件
五、Axios通信
六、计算属性
七、slot插槽
八、自定义事件内容分发

一、认识

官网：

https://cn.vuejs.org/

作者：

尤雨溪，据说现在是阿里P8

首先，官方说是渐进式js框架，对于后端程序员来说，我觉得渐进式的意思是指：可以通过操作很少的DOM甚至不需要操作DOM元素，就能轻易完成数据和视图的绑定。

它不推荐再使用jQuery

最后，抓住它三个关键词就行了：js框架、简化DOM操作、响应式数据驱动

二、入门

先把官网的例子看一看，入门肯定要写一遍hello world

<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">{{ message }}</div></body><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})</script>
</html>

效果：数据绑定上了

el的值就是css选择器，data里放数据

三、指令

v-text

作用：设置标签的文本值
简写：{{}}
效果：它会完全替换掉里边的文本，{{}}是这个指令的简写
所以：各有各的应用场景，要么完全替换，要么替换部分

     <div id="app"><h1 v-text="message">耗子尾汁</h1><h1 v-text="info">耗子尾汁</h1><h1>{{message}}耗子尾汁</h1></div>

     var app = new Vue({el: '#app',data: {message: '用户名：break',info: '用户名：java程序猿'}})

v-html

作用：设置标签的innerHTML

     <div id="app"><p v-html="context"></p><p v-text="context"></p></div>

     var app = new Vue({el: '#app',data: {context: "<a href='#'>一个a标签</a>"}})

v-on

作用：给元素绑定事件
简写：@

     <div id="app"><input type="button" value="呆鸡" v-on:click="go" /><input type="button" value="划过" v-on:mouseenter="go" /><input type="button" value="双鸡" v-on:dblclick="go" /><input type="button" value="双鸡简写" @dblclick="go" /><p>{{count}}</p></div>

     var app = new Vue({el: '#app',data: {count: 1},methods:{go: function(){console.log("事件触发");this.count++}}})

v-show

作用：根据真假显示/隐藏元素

     <div id="app"><input type="button" value="显示/隐藏" @click="go" /><img v-show="isShow" src="img/0005018622772314_b.jpg" /></div>

     var app = new Vue({el: '#app',data: {isShow: true,},methods:{go: function(){this.isShow = !this.isShow;}}})

v-if

作用：根据真假显示/隐藏元素（操作dom元素）
与v-show不同的是：v-show是改变元素里边的属性，v-if是直接干掉这个标签

v-bind

作用：设置元素属性，比如class、title、src。。。
简写：:属性名

     <div id="app"><img :src="imgSrc" alt="" :title="imageTit" /></div>

     var app = new Vue({el: '#app',data: {imgSrc: 'img/0005018622772314_b.jpg',imageTit: '这是一张图'}})

v-for

作用：循环

<div id="app"><ul><li v-for="(item,index) in arr">{{index}},城市：{{item}}</li></ul><ul><li v-for="i in arr2">名字：{{i.name}}</li></ul></div>

     var app = new Vue({el: '#app',data: {arr: ["北","上","广","深","杭"],arr2: [{name:"张"},{name:"王"},{name:"李"},{name:"赵"}]}})

键盘回车事件

     <div id="app"><input type="text" @keyup.enter="go('666')" /></div>

     var app = new Vue({el: '#app',methods:{go: function(v1){console.log("gogogo" + v1)}}})

v-model

作用：获取和设置表单元素的值（双向数据绑定）

     <div id="app"><input type="text" v-model="message" @keyup.enter="go" /><input type="button" @click="edit" value="更改" />{{message}}</div>

     var app = new Vue({el: '#app',data: {message: ''},methods:{go:function(){console.log(this.message)},edit:function(){this.message = 'hello Vue'}}})

四、组件

官网上的图：第一层代表整个页面，第二层代表这个页面分三大块，第三层是具体每块里的干货

     <div id="app"><gogogo v-for="item in items" v-bind:go="item"></gogogo></div>

     Vue.component("gogogo",{props: ["go"],template: "<ul><li>{{go}}</li></ul>"});var app = new Vue({el: '#app',data: {items: ["吃","吃x2","吃x3"]},methods:{}})

五、Axios通信

准备好json

{"name": "break","url": "127.0.0.1","page": 1,"isDel": false,"addr": {"country": "cn","city": "longcheng"},"links": [{"name": "百度","url": "www.baidu.com"},{"name": "腾讯","url": "www.qq.com"}]
}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app"></div>

     var app = new Vue({el: '#app',mounted() {//钩子函数axios.get("json/test.json").then(response=>(console.log(response.data)))}})

拿值

     <div id="app">{{info.name}}{{info.addr.city}}</div>

     var app = new Vue({el: '#app',data(){return{info: {name: null,addr: {city: null}}}},mounted() {//钩子函数axios.get("json/test.json").then(response=>(this.info = response.data))}})

解决生命周期中出现模板的问题/闪烁问题（用空白替换）

 <head><meta charset="utf-8" /><title></title><style>[v-clock]{display: none;}</style></head><body><div id="app" v-clock>{{info.name}}{{info.addr.city}}</div></body>

六、计算属性

计算属性可以想象成缓存，具体理解看下边代码
html

     <div id="app" v-clock>{{go()}}<br />{{go2}}</div>

     var app = new Vue({el: '#app',data: {message: "123456"},methods: {go: function(){return Date.now()}},computed: {go2: function(){return Date.now()}}})

调用，go是方法，而go2是属性，并且go2跟缓存类似，值不变

如果稍微改一下计算属性的方法，属性值就变了

     computed: {go2: function(){this.messagereturn Date.now()}}

七、slot插槽

顾名思义，首先联想到的就是usb口，可动态插拔，在slot也差不多，玩的就是可复用
下来理解它

     <div id="app" v-clock><p>某列表</p><ul><li>值1</li><li>值2</li><li>值3</li></ul></div>

p里的text和li里的text都是从data里边来的，ul是不变的
html

     <div id="app"><go><go-title slot="go-title" :title="title"></go-title><go-items slot="go-items" v-for="item in items" :item="item"></go-items></go></div>

     //slot:插槽Vue.component("go",{template: '<div>\<slot name="go-title"></slot>\<ul>\<slot name="go-items"></slot>\</ul>\</div>'});Vue.component("go-title",{props: ['title'],template: '<div>{{title}}</div>'});Vue.component("go-items",{props: ['item'],template: '<li>{{item}}<li>'});var app = new Vue({el: '#app',data: {title: "标题",items: ["a","b","c"]}});

八、自定义事件内容分发

重点是this.$emit()

     <div id="app"><go><go-title slot="go-title" :title="title"></go-title><go-items slot="go-items" v-for="(item,index) in items":item="item" :index="index" @re="remove(index)"></go-items></go></div>

//slot:插槽Vue.component("go",{template: '<div>\<slot name="go-title"></slot>\<ul>\<slot name="go-items"></slot>\</ul>\</div>'});Vue.component("go-title",{props: ['title'],template: '<div>{{title}}</div>'});Vue.component("go-items",{props: ['item','index'],//只能绑定当前组件的方法template: '<li>{{index}}----{{item}}<button @click="remove">删除</button><li>',methods: {remove: function(index){this.$emit("re",index);//自定义事件分发}}});var app = new Vue({el: '#app',data: {title: "标题",items: ["a","b","c"]},methods: {remove: function(index){console.log(this.items[index]);this.items.splice(index,1);}}});

Vue渐进（一）入门相关推荐

webpack - vue Component 从入门到放弃（三）
离上一篇已经一个星期了,人的拖延症是没法救的,今晚趁着蒙蒙春雨,来抒发抒发情感. 上一篇简单介绍了webpack的配置,这里稍微再做一一下延伸插件插件可以完成更多 loader 不能完成的功能.插 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
.NET Core实战项目之CMS 第六章入门篇-Vue的快速入门及其使用
写在前面上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
Vue与Element入门使用
Vue: Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件. 视图:负责页 ...
视频教程-新React+VUE前端教程入门到精通-Vue
新React+VUE前端教程入门到精通 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客户, ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
[Vue.js 1] 入门基础知识与开发
最近接触的几个项目框架全部用到了Vue.js技术,没办法只能对vuejs进行深入学习,不过可喜的是Vue.js学习路线非常快,上手也是非常快的,所以对于前端开发也是主流的开发框架了.不过其中的js部分 ...

Vue渐进（一）入门

索引