//远程CDN<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">script>//本地  下载vue.min.js然后引用<script src="vue.min.js">script>

id="app">)3、定义Vue实例，接管app区域(var VM = new Vue({ ...});)4、定义model(数据对象)(data：{name:"..."})5、在app中展示数据({{}}双括号是VUE中的差值表达式,将表达式的值输出到HTML页面){{}}: 插值表达式的作用：通常用来获取Vue实例中定义的数据(data)、属性节点中 不能够使用插值表达式el: 挂载点：定义 Vue实例挂载的元素节点,表示vue接管该区域；Vue会管理el选项命中的元素,及其内部元；el选择挂载点时,可以使用其他选择器，但是建议使用 ID选择器；可以设置其他的DOM元素进行关联，但是建议选择DIV, 不能使用HTML和Body标签。data: 数据对象：Vue中用到的数据定义在data中；data中可以写复杂类型；渲染复杂类型数据的时候,遵守js语法。

声明式渲染的好处

Vue中的声明式渲染,简单理解就是我们声明数据,Vue帮我们将数据渲染到HTML。jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合。在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以。

Vue常用指令

根据官网的介绍，指令 是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

常用指令	作用	注意	简写或总结
v-text	获取data数据, 设置标签的内容	默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容
v-html	设置元素的 innerHTML (可以向元素中写入新的标签)
v-on	为元素绑定事件 v-on:click="方法"	绑定的方法定义在 VUE实例的, method属性中	@click  单击 @dbclick 双击 传递自定义参数 : 函数调用传参 事件修饰符: 对事件触发的方式进行限制
v-show	v-show指令, 根据真假值,切换元素的显示状态	可通过触发方法, 对isShow进行取反。来控制是否显示	原理是修改元素的display,实现显示或者隐藏 指令后面的内容,最终会解析为 布尔值 值为true 显示, 为false 则隐藏 数据改变之后,显示的状态会同步更新
v-if	根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )		本质是通过操作dom元素,来切换显示状态 表达式为true 元素存在与dom树,为false从dom树中移除 频繁切换使用 v-show ,反之使用v-if
v-bind	设置元素的属性 (比如:src,title,class)	语法格式: v-bind:属性名=表达式	v-bind 指令的作用是：为元素绑定属性 完整写法 v-bind:属性名，可以简写为 :属性名
v-for	根据数据生成列表结构	语法是: (item,index) in 数据	数组经常和 v-for结合使用,数组有两个常用方法:push() 向数组末尾添加一个或多个元素；shift() 把数组中的第一个元素删除 item和index 可以结合其他指令一起使用  item和index 可以结合其他指令一起使用
v-mode	获取和设置表单元素的值(实现双向数据绑定)		v-model 指令的作用是便捷的设置和获取表单元素的值 绑定的数据会和表单元素值相关联 双向数据绑定
v-cloak	解决插值表达式闪烁问题	当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我 们可以使用 v-cloak 指令来解决这一问题。	<style>/* 通过属性选择器,设置 添加了v-cloak */[v-cloak] {display: none;}style>

MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。MVVM模式将页面,分层了 M 、V、和VM ,解释为：Model: 负责数据存储(data就是MVVM模式中的 model)；View: 负责页面展示(body标签部分代码)；View Model: 负责业务逻辑处理(比如Ajax请求等)，对数据进行加工后交给视图展示(创建的vue实例,就是 VM ViewModel)

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定。

计数器案例

实现简单记事本案例

三、axios

Ajax概念

Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。

Ajax的作用

Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新(局部更新)。传统的网页如果需要更新内容，必须重载整个网页页面。简单记: Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 维护用户体验性, 进行网页的局部刷新。浏览器访问服务器的方式：同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作

<script>  function run1() {  //JQuery Ajax方式 发送异步请求    $.ajax({      url: "/ajax",      async:true,      data: { name: "天青" },      type: "post",      dataType:"text",      success: function (res) {        console.log(res)        alert("响应成功" + res);      },      error: function () {        alert("响应失败!");      }    });  }script>

axios

axios：VUE中结合网络数据进行应用的开发。目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便；axios作用: 在浏览器中可以帮助我们完成ajax异步请求的发送使用步骤:1. 导包

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

2. 请求方式,以GET和POST举例GET

axios.get(地址?key=value&key2=value2).then(function(response){},function(error){});

POST

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(error){})

3. 根据接口文档, 访问测试接口,进行测试axios总结：1. axios 必须导包才能使用2. 使用get或者post方法,就可以发送请求3. then方法中的回调函数,会在请求成功或者请求失败的时候触发4. 通过回调函数的形参可以获取响应的内容,或者错误信息

获取笑话案例

天气查询案例

四、computed 计算属性

computed 的作用

减少运算次数, 缓存运算结果. 运用于重复相同的计算

computed总结

1. 定义函数也可以实现与计算属性相同的效果,都可以简化运算2. 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

五、filter 过滤器

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

过滤器使用位置

1. 双括号插值内

{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道将数据传输给过滤器进行过滤 加工操作

2. v-bind绑定的值的地方

<h1 v-bind:id=" msg | filterA"> {{ msg }} h1>

过滤器分类

1.局部过滤器(写在Vue实例中)2.全局过滤器(在创建Vue实例之前 创建全局过滤器)

过滤器总结

1. 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式2. 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

六、watch 侦听器

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性 。写在Vue事例中，用watch:{data中变量名(新值,旧值){方法},}表示

七、Component 组件

组件(Component)是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。我们将相同的功能进行抽取,封装为组件，这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。vue的组件有两种: 1.全局组件

//语法格式Vue.component("组件名称", {  template: "html代码", // 组件的HTML结构代码  data(){ //组件数据    return {}  },  methods: { // 组件的相关的js方法    方法名(){    // 逻辑代码    }  }})

注意:1. 组件名以小写开头，采用短横线分割命名: 例如 hello-Word2. 组件中的data 必须是一个函数,注意与Vue实例中的data区分3. 在template模板中, 只能有一个根元素2.局部组件相比起全局组件，局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。唯一不同就是：局部组件要写在Vue实例里面。

new Vue({  el: "#app",  components: {    组件名: {      // 组件结构      template: "HTML代码",      // data数据      data() { return { msg:"xxxx" };},    },  },});

注意:创建局部组件，注意 components，注意末尾有 ‘s’，而全局组件是不用+ ‘s’ 的。这意味着，components 里可以创建多个组件。

组件与模板分离

由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。将模板写在HTML中, 给模板指定一个ID1. 上面这种写法，浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会在页面中展示的。直到它被 JS 中的 Vue 调用。2. 在 html 中，template 标签一定要有一个 id，因为通过 id 是最直接被选中的。data 和 methods等参数，全部都要放到 Vue 实例里面写。

八、Vue生命周期

生命周期图示

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。

钩子函数介绍

生命周期中的钩子函数钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作

函数	说明
beforeCreate()	在创建Vue实例之前,可以执行这个方法. 例如 加载动画操作
created()	实例创建完成,属性绑定好了,但是DOM还没有生成.
beforeMount()	模板已经在内存中编辑完成了，尚未被渲染到页面中.
mounted()	内存中的模板已经渲染到页面，用户已经可以看见内容.
beforeUpdate()	数据更新的前一刻 , 组件在发生更新之前,调用的函数
updated()	updated执行时，内存中的数据已更新，并且页面已经被渲染
beforeDestroy ()	钩子函数在实例销毁之前调用
destroyed ()	钩子函数在Vue 实例销毁后调用

九、Vue Router 路由

路由介绍

在Web开发中，路由是指根据URL分配到对应的处理程序。路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图单页面web应用(single page web application，SPA)SPA:单页应用不存在页面跳转，它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概念下转变为了 body 内某些元素的替换和更新。单页面应用的好处:1. 用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。2. 适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

路由相关的概念

router：是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用(SPA)变得易如反掌 ,router 就相当于一个管理者，它来管理路由。route：ruter相当于路由器, route就相当于一条路由.比如: Home按钮 => home内容， 这是一条route,news按钮 => news内容， 这是另一条路由。routes：是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， {about按钮 => about 内容}]router-link组件：router-link 是一个组件，是对标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML内容。to 属性为目标地址， 即要显示的内容router-view 组件：路由导航到指定组件后,进行渲染显示页面

路由使用方法

1.Vue.js 路由需要载入 vue-router 库

//方式1: 本地导入<script src="vue-router.min.js">script>//方式2: CDN<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>

2.定义路由所需的组件3.定义路由 每个路由都由两部分 path (路径) 和component (组件)4.创建router路由器实例 ,管理路由5.创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点Vue 的$mount()为手动挂载，在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作、判断等)，之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同.

//HTML代码<body>  <div id="app">    <h1>渣浪.comh1>    <p>            <router-link to="/home">go to homerouter-link>      <router-link to="/news">go to newsrouter-link>    p>        <router-view>router-view>  div>body>//JS代码<script src="./vue.min.js">script><script src="./vue-router.min.js">script><script>  //1.定义路由所需的组件  const home = { template: "

" }; const news = { template: "

" }; //2.定义路由 每个路由都有两部分 path和component const routes = [ { path: "/home", component: home }, { path: "/news", component: news }, ]; //3.创建router路由器实例,对路由对象routes进行管理. const router = new VueRouter({ routes: routes, }); //4.创建Vue实例, 调用挂载mount函数,让整个应用都有路由功能 const VM = new Vue({ router, }).$mount("#app"); //$mount是手动挂载代替elscript>

路由总结

1. router是Vue中的路由管理器对象,用来管理路由2. route是路由对象,一个路由就对应了一条访问路径,一组路由用routes表示3. 每个路由对象都有两部分 path(路径)和component (组件)4. router-link 是对a标签的封装,通过to属性指定连接5. router-view 路由访问到指定组件后,进行页面展示