vue

vue是框架，vue.js是vue框架的核心js库 库：是一个封装好的特定的方法的集合，提供给开发者使用，库没有控制权，控制权在使用者手中。代表：jQuery、underscore、util 框架：框架就是一整套架构，会基于自身的特点向用户提供一套相当完整的解决方案，而且控制权在框架本身，使用者要用框架所规定的某种规范进行开发。代表：backbone、angular、vue 历史过渡框架：jQuery --> YUI --> backbone ---> anguler --> react -->vue vue将库结合在一起，VueRout、vuex，axios 特点：响应式数据绑定（放弃操作dom，进而操作数据） 　　　可组合的组件系统 初识vue.js 　　 读音：同view，视图的意思 　　vue到底是什么：一个mvvm框架（库），和angular类似，比较容易上手、小巧 　　mvc思想：module层（数据）和view层（视图）分离，由数据驱动视图，类似的有 　　　　　　　　mvp，mvvm，mv*，mvx等 　　官网：http://cn.vuejs.org/ 　　手册：http://cn.vuejs.org/api/ vue和angular的区别 　　vue----简单，易学 　　　　　指令以v-xxx的形式 　　　　　它是一片html代码（view层），配合上json数据

v-bind 动态的绑定数据，简写为 : v-on 绑定事件监听器，简写为 @ v-text 更新数据，会覆盖已有结构 v-html 可以解析数据中的html v-show 根据值的真假，切换元素的display属性 v-if 根据值的真假，切换元素会被销毁、重建 v-else-if 多条件判断，为真则渲染 v-for 基于源数据多次渲染元素或模板块 v-model 在表单控件元素上创建双向数据绑定 v-pre 跳过元素和子元素的编译过程 v-once 只渲染一次，随后数据更新不重新渲染 v-cloak 隐藏未编译的Mustache语法，css中设置[v-cloak]{ display:none } 来源： https://www.cnblogs.com/xiaofang-FE/p/6872973.html

Vuejs 源码： https://github.com/zhuangZhou/vuejs 下载Vue.js 官网： http://vuejs.org live-server使用 live-server是一个简单的服务器，具有热更新 使用npm进行全局安装 npm install -g live-server 在项目目录中启动 liver-server 内部指令 v-if & v-else & v-show 1、v-if v-if 用来判断是否在加载HTML的DOM，比如模拟用户登录 <div v-if="isLogin">你好，XXX</div> <div v-else>请登录</div> 在Vue里的data定义isLogin的值，当为true时，显示“你好，XXX”，当为false时，显示“请登录”。 2、v-show v-show是通过调整css的display属性的属性值，来显示和隐藏节点，其实在HTML渲染时，已经加载了DOM； <div v-show="isLogin">哈哈哈</div> 当isLogin为true时，显示“哈哈哈”，当为false时，隐藏。 3、两者的区别 v-if：判断是否加载，可以减轻服务器压力，当需要时在加载 v-show：调整css dispaly属性，可以使客户端操作更加流畅。 v-for 1、 v-for v

/*--> */ /*--> */ v-text 读取文本不能读取 html 标签 ，解析文本 　　使用{{XXX}}这种情况是有弊端的，当我们网速很慢或者javascrit出错时，会暴露我们的{{XXX}}。v-text就是解决这个问题的。 v-html 能读取 html 标签，解析 html 标签 　　双大括号会将数据解释为纯文本，而非 HTML。为了输出真正的 HTML，你就需要使用 v-html 指令。 　　要注意的是：在正式环境上动态渲染 HTML是很危险的，因为容易导致 XSS攻击。 v-if 显示与隐藏 和 v-show 对比的区别 就是是否删除 dom 节点 默认值为 false v-else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误 　　v-if用来判断是否加载html的DOM v-show 　　css中 display属性， DOM已经加载，只是 css控制没有显示。 v-if和v-show的区别： 　　 v-if:判断是否加载，可以减轻服务器的压力，在需要时加载 　　v-show:调整css display属性，可以使客户端操作更加流畅 v-bind:class 　　三种绑定方法 　　1 、对象型 '{red:isred}' 　　 2 、三目型 'isred ?"red":"blue"' 　　 3

第1节：走起我的Vue2.0 vue.js /vue.min.js live-server: cnpm install -g live-server npm init 【目录生成package.json方便进行包的管理】 4.vue文件夹下首先生成index.html 5.assets文件夹下放置了css和js目录 6.example文件夹下放置了helloworld.html 然后index.html里面绑定了helloworld.html的链接 ♥在helloworld.html里面编写第一次的vue代码 <script type="text/javascript"> var app = new Vue ({ el:"#app", data:{ message:"sweet~" } }) </script> 第2节：v-if v-else v-show 指令 登陆的需求 如果用户登录 显示你好 如果用户没有登陆 显示已经登陆 v-if&v-else单判断 <div id="app"> <div v-show="isLogin">登陆成功</div> <div v-else>登陆失败</div> </div> <script type="text/javascript"> var app = new Vue ({ el:"#app", data:{ isLogin:false }

（tips：感谢您点击我的文章，并且阅读， 本人非科班出生，所学知识是网上找的，若有理解错误，望大佬能够指出， ） Vue概述 Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 Vue 的优点： 易用：熟悉HTML、CSS、 JavaScript知识后，可快熟上手 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kb运行大小，超快虚拟DOM Vue基本使用 Vue的基本使用步骤 提供需要填充数据的标签 引入Vue.js 把vue的data属性内的 key放到对应的标签位置 实例参数分析 el：元素的挂载位置（值可以是css选择器或者DOM元素）（把数据关联到什么位置） data：模型数据：（值是一个对象） 插值表达式 将数据填充到HTML标签中 插值表达式支持基本的计算操作， Vue代码运行原理 概述编译过程的概念（Vue语法→原生语法） Vue代码→执行→通过Vue框架翻译→获取原生语法→浏览器运行框架翻译好的代码， Vue模板语法 如何理解前端渲染？ 把数据填充到HTML标签中 通过ajax 获取后端数据 填充到Vue模板，最后展示出来，这个过程就是前端渲染 前端渲染的方式 原生JS拼接字符串 使用前端模板引擎 使用Vue特有的模板语法 模板语法概述 插值表达式 指令 什么是指令? 什么是自定义属性？

需要在父组件上知道子组件什么时候被创建、挂载或者是更新，特别是当为原生js库创建组件时。 通过使用@hook：前缀监听生命周期中的钩子，并指定回调函数 举个例子，如果你想要在第三方组件v-runtime-template渲染时做一些事情，那么你可以监听它的生命周期中的updated钩子 <v-runtime-template @hook:updated="doSomething" :template="template" /> 你可能知道有一些方法可以在你自己的组件上，实现以上的需求。举个例子，通过在子组件的生命周期的钩子函数中，触发事件： mounted() { this.$emit("mounted"); } 然后你就可以在父组件中这样做： <Child @mounted="handleFn"/> 如果在第三方组件时，是办法这样实现的 取而代之的方法就是使用@hook前缀监听生命周期中的钩子，并指定回调函数 来源： CSDN 作者： KingLion_ 链接： https://blog.csdn.net/KingLion_/article/details/104728033

Vue实例 创建一个Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型 ，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。 当创建一个 Vue 实例时，你可以传入一个 选项对象 。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档 中浏览完整的选项列表。 一个 Vue 应用由一个通过 new Vue 创建的 根 Vue 实例 ，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的： 根实例 └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics 数据与方法 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的 响应式系统 中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 // 我们的数据对象 var data = { a: 1 } //

content | 过滤器, vue中没有提供相关内置过滤器，可以自定义过滤器 过滤器有2中，分别是组件内过滤器和全局过滤器 组件内的过滤器就是options中的一个filters属性（一个对象） 两者区别： 全局的范围大，如果出现同名，权力小 组件内的出现同名时，权力大，范围小 来源： CSDN 作者： 前端黎姿 链接： https://blog.csdn.net/weixin_45622540/article/details/104728345

Vue学习 1.Vue简介 Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 中文网： https://vuejs.bootcss.com/ 2.如何使用Vue CDN链接 对于制作原型或学习，你可以这样使用最新版本： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： <script src="https://cdn.jsdelivr.net/npm/vue"></script> 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件： <script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js' </script> NPM 在用 Vue