标签：监听器 lis exp 值传递 red ie8 -o min .text
1、build ：dev-server.js 是在使用终端命令时启动时执行的，里面可以修改端口号 （修改第16行即可）
2、index.html 是整个文件的入口
src 装的是你写入的文件
3、main.js 是当前文件的主要的逻辑入口
APP.vue 是根组件
4、一些事件和方法
v-on:click="事件名"
v-on:keyup="事件名" //在按下任意键时触发
v-on:keyup.enter="事件名" // 在按下enter 键时触发
v-on:keyup.alt.enter="事件名" // 需要按住alt键再按下enter键才会被调用
更多事件可以去官方文档查看
5、
<li v-for="user in users">
<input type="checkbox" class="toggle"
v-model="user.contacted"
>
<!--下面span中 :class是绑定一个样式，user.contacted为true 时有这个样式，为false时，没有这个样式-->
<span :class="{contacted:user.contacted}">
{{user.name}}:{{user.email}}
<button v-on:click="deleteUser(user)">x</button>
</span>
</li>
6、如何使用路由
修改了main.js
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import App from ‘./App‘
import Users from ‘./components/Users‘
import Test from ‘./components/Test‘
Vue.use(VueRouter)
Vue.config.productionTip = false
//设置路由
const router = new VueRouter({
mode:‘history‘,
base:__dirname,
routes:[
{path:"/",component:Users},
{path:"/test",component:Test},
]
})
/* eslint-disable no-new */
new Vue({
router,
template: `
<div id="app">
<ul>
<li>
<router-link to="/">Users</router-link>
<router-link to="/test">Test</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}).$mount("#app")
7、如何使用http 请求
安装 resource npm install vue-resource --save
jsonplaceholder.typicode.com 中有一些写好的数据
created 方法不需要调用自动执行
8、核心概念
vue:组件化 双向数据流（基于ES5中的defineProperty 来实现的），IE9+才支持
angular:模块化 双向数据绑定 （脏检测：一个数组（$watch））
在 vue 官网上有vue与其他框架的对比（建议学完vue 再看）
双向数据流：
1向 ：js 内存属性发生改变，影响页面的变化
1向 ： 页面的改变影响js内存属性的改变
9、常用指令
v-text 是元素的innerText 只能在双标签中使用
v-html 是元素的innerHTML，不能包含{{xxx}}
v-if 元素是否移除或者插入
v-show 元素是否显示或隐藏
v-model 双向数据绑定
v-bind:value :给value 赋值 v-bind是单向数据绑定（内存js 改变影响页面）
创建一个项目基本步骤：
1、创建 index.html
创建div 标签，id=“App”
2、配置main.js
1）引入vue
2）引入 app.vue，用它的内容来替换 div id = app
3) 构建 vue 实例
new Vue({
//渲染内容的目的地
el:‘#app‘,
//渲染内容
render:function(c){ // c只是一个形参，叫什么都可以
return c(App)
}
})
//一般来说，key是固定的，值是你设置的（可变的）
3、app.vue
里面可以写代码在浏览器中显示了
<template></template>
<script></script>
<style></style>
10、class 结合v-bind 使用
需要根据可变的表达式的结果来给class 赋值，就需要用到v-bind：class="xxx"
v-bind：属性名="表达式"，最终表达式运算结束的结果赋值给该属性名
——简化的写法是：`：属性名="表达式"`
class：结果的分类：
——一个样式：返回字符串（三元表达式和key和样式的清单对象）
——多个样式：返回对象（样式做key，true 或false做值）
箭头函数：（c）=>{return c(App)}
1、参数是一个的时候，小括号可以省略
2、当代码只有一行且是返回值的时候，可以省略大括号
上述箭头函数简写为 c = > c(App)
v-bind:class="isRed?‘red‘:‘green‘" 三元表达式来取其一 取一个，返回一个字符串
取多个 返回一个对象
复杂情况，通过遍历，根据当前对象的成绩，匹配成绩和样式
的清单对象，用成绩做key，取对象的value，最终返回字符串做样式名
:class="{‘A‘:‘red‘,‘B‘:‘green‘}"[stu.score]
这里stu.score 为key，通过score去取对象中的值
11、methods 和 v-on 的使用
*绑定事件的方法
`v-on 事件名="表达式||函数名"` 比如:v-on:click="change()"
简写：`@事件名="表达式||函数名"`
* 函数名如果没有参数，可以省略() 只给一个函数名称 ，比如 v-on:click="change"
*声明组件内的函数，在export default 这个对象的根属性加上methods属性，其是一个对象，
——key 是函数名，值是函数体
*在export default 这个对象的根属性加上data属性，其是一个函数，返回一个对象
——对象的属性是我们初始化的变量的名称
*凡是在 template 中使用变量或者函数，不需要加 this，在script中使用就需要加上this
12、v-for 的使用
* 可以使用操作数组（item，index）
* 可以使用操作对象（value，key，index）
* key是类似trank by 的一个属性
* 为的是告诉vue ，js 中的元素，与页面之间的关联，当试图删除元素的时候，是单个元素的删除而不是整版替换，所以需要关联其关系，设置（必须，性能） 2.xxx之后必须设置
13、漂亮的列表
*绑定class，根据成绩级别显示不同的 class
:class="{‘A‘:‘red‘,‘B‘:‘green‘,‘C‘:‘blue‘,‘D‘:‘pink‘,‘E‘:‘gray‘}[hero.score]"
*列表的添加和删除功能
添加： 通过点击事件向数组中push对象
删除：根据v-for 中的index ，将被点击的某条删除
14、父子组件
在 vue文件中的style 中填写的样式默认是全局的，如果想要局部有效，在style 标签上加上 scoped 字样
*父和子，使用的是父，被用的是子
*父需要声明子组件，引入子组件对象，声明方式如下
```javascript
import 组件对象 from ‘./xxx.vue‘
export default{
components:{
组件名：子组件对象
}
}
*全局组件，使用更为方便，不需要声明，直接用
*在main.js 中引入一次，使用`vue.component(‘组件名‘,‘组件对象‘)`
*所有的组件就可以直接通过组件名使用
Vue.component(‘headerVue‘,headerVue);//注册一个组件，第一个参数是名称，第二个参数是实际的对象
// （显示什么内容，具备什么功能）
15、父组件传递值给子组件
* 父组件通过子组件的属性将值进行传递
——方式有2：常量: prop1="常量值"
变量: prop2="变量名"
子组件需要声明
- 根属性props:[‘prop1‘,‘prop2‘]
- 在页面中直接使用{{prop1}}
- 在js中应该如何使用prop1？ 通过 this.prop1 获取
16、子组件向父组件通信（vuebus）扩展
通过new Vue()这样的一个对象，来$on(‘事件名‘,fn(prop1,prop2))
另一个组件引入同一个vuebus，来$emit(‘事件名‘,prop1,prop2)
创建通信的js文件，代码为
import Vue from ‘vue‘;
var connector = new Vue();
export default connector;
父组件中template部分代码：
<sub-vue></sub-vue>
<button @click="listen">爸爸焦急的听电话</button>
script中的部分代码：
import connect from ‘./connector.js‘;
methods:{
listen(){
connect.$on(‘phone‘,function(msg){
console.log(msg);
})
}
}
子组件中template 部分代码：
<button @click="callDaddy">打电话给爸爸</button>
script 中的部分代码：
methods:{
callDaddy(){
// 发射信号
connect.$emit(‘phone‘,‘62分钟来‘)
}
}
17、vue.js 文档分类
1、全局的代表Vue.的
2、实例的代表this. 或者 new Vue().
3、选项代表 new Vue()的参数或者export default 里边的属性
全局：通过vue 调用 分 API 和 配置
全局配置
silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip
全局 API
Vue.extend
Vue.nextTick
Vue.set
Vue.delete
Vue.directive
Vue.filter
Vue.component
Vue.use
Vue.mixin
Vue.compile
Vue.version
选项 / 数据 options/类别
data
props
propsData
computed
methods
watch
选项 / DOM options
el
template
render
renderError
选项 / 资源 options
directives
filters
components
以上带选项的都与实例相关，如：
new Vue({
el:
render:
})
export default{
components:{},
methods:{
}
}
实例：组件内的this 和 new Vue()
实例方法 / 事件
vm.$on
vm.$once 只触发一次
vm.$off 取消事件
vm.$emit
指令
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once
18、复习
* vue 单文件方式 xxx.vue
*1：准备好配置文件 package.json (包描述文件&&封装命令npm run dev)+webpack.config.js文件（打包的配置文件）
*2：创建index.html(单页应用的页)
*3：创建main.js(入口文件)
*4：引入vue和相关的文件 xxx.vue
*5：new Vue(options)
*6:options：
-data
-methods
-components（组内声明子组件）
-props
*7：实例
-在组件内（xxx.vue）中的this
-new Vue()
-事件
+this.$on(事件名，回调函数(参数))
+this.$emit(事件名，数据)
+this.$once(事件名，回调函数(参数)) 就触发一次
+this.$off(事件名)；取消事件
*8:全局
-Vue.component(‘组件名‘，组件对象) 在哪里都可以使用
*9：组件传值
-父传子：属性作为参数
+常量 title=‘xxx‘子组件声明接收参数 props:[‘xxx‘]
+变量 v-bind:title=‘num‘ 子组件声明接收参数props:[‘xxx‘]
-子传父：vuebus（只能是同一辆车，即事件名相同）
+ 先停车到父组件，on一下
+ 再开车到子组件，如果需要的话，emit一下，触发上述时间的回调函数
19、过滤器
*content | 过滤器，vue中没有提供相关的内置过滤器，可以自定义过滤器
*组件内的过滤器 + 全局过滤器
-组件内过滤器就是options中的一个filters 的属性（一个对象）+多个key 就是不同过滤器名，多个value就是与key 对应的过滤方式函数体
-全局过滤器就是Vue.filter(名，fn)
*输入的内容帮我做一个反转
当全局过滤器和组件内过滤器重名时，以组件内过滤器为有效
总结：
-全局： 范围大，如果出现同名时，权利小
-组件内：如果出现同名时，权力大，范围小
20、获取DOM 元素
*救命稻草，前端框架就是为了减少DOM操作，但是特定情况下，也留了后门。
*在指定的元素上，添加 ref =‘名称‘
*在获取的地方加入 this.$refs.名称A
-如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象
+ 可以直接操作
-如果ref放在了组件对象上，获取的就是组件对象,进行操作
-对应的事件
+created 完成了数据的初始化，此时还未生成DOM，无法操作DOM
+mounted 将数据已经装载到了DOM之上，可以操作DOM
*两个钩子函数 created and mounted （也可以叫事件）
// 组件创建后，数据已经完成初始化，但是DOM还未生成
created(){//事件的处理函数（created）
console.log(‘created:‘,this.$refs.myDiv);//获取不到
},
// 数据装载到DOM后，各种数据已经就位，将数据渲染到DOM上，DOM已经生成
mounted(){
//console.log(this);
console.log(‘sub:‘,this.$refs.sub.$el);
// 获取组件对象，并获取到其的DOM对象
this.$refs.sub.$el.innerHTML = "你好";
// console.log(‘mounted‘,this.$refs.myDiv);
//涉及DOM类的操作
//this.$refs.myDiv.innerHTML="123456789"
// 涉及到数据的操作
this.text="嘻嘻哈哈";
}
21、mint-ui
*饿了么，element-ui 在PC端使用的
*移动端版本 mint-ui
*https://mint-ui.github.io/#!/zh-cn
安装 mint-ui命令：npm i mint-ui -S
注意：项目中应该按需引入
//引入全部组件
import Vue from ‘vue‘;
import Mint from ‘mint-ui‘;
Vue.use(Mint);
//按需引入部分组件
import { Cell,Checklist } from ‘minu-ui‘;
Vue.component(Cell.name,Cell);
Vue.component(Checklist.name,Checklist);
meta:vp 回车，可以出来meta的完整适配代码：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
注意：
- 如果是全部安装的方式
+ 1：在template中可以直接使用组件标签 +2：在script中必须要声明，也就是引入组件对象（按需加载）
22、 获取网站技术的插件
* wappalyzer
获取到当前网站的使用的技术
23、vue-router
* 前端路由 核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
*ui-router:锚点值改变，如何获取模板？ ajax
*vue中，模板数据不是通过ajax请求来，而是调用函数获取到模板内容
*核心：锚点值改变
*以后看到vue开头，就知道必须Vue.use
* vue的核心插件：
-vue-router 路由
-vuex 管理全局共享数据
*使用方式
-1：下载 `npm i vue-router -S`
-2：在main.js 中引入`import VueRouter from ‘vue-router‘`
-3：安装插件`Vue.use(VueRouter)`
-4：创建路由对象并配置路由规则
+ `let router = neew VueRouter({routes:[{path:‘/home‘,component:Home}]})`
-5：将其路由对象传递给Vue 的实例，options中
+ options中加入`router:router`
-6：在app.vue中留坑
<!-- 留坑，非常重要 -->
<router-view></router-view>
24、 Vue 学习方式
vue:这个对象怎么来的？
框架的使用，关注vue代码怎么写，不会照抄
框架，先掌握运用
组件的组成部分：
结构、样式、动态效果
基于webpack 编译——>核心，最终理解打包的好处
25、 命名方式使用router-link
//创建路由对象并配置路由规则
let router = new VueRouter({
routes:[
//一个个对象
{name:‘music‘,path:‘/myMusic‘,component:Music},
{path:‘/movie‘,component:Movie}
]
})
*router-link实际是根据name 找到对应的路径；
<!-- 1、去哪里 -->
<router-link :to="{name:‘music‘}">进入音乐1</router-link>
<router-link :to="{name:‘music‘}">进入音乐2</router-link>
<router-link :to="{name:‘music‘}">进入音乐3</router-link>
<!-- 也可以跟路径使用 ，但是不建议使用-->
<router-link to="/movie">进入电影</router-link>
Vue.use(VueRouter);//挂载属性
二、基础学习
1、 vue中响应的数据绑定和视图组件
可以从github上找vue的学习资源
1：渐进式框架Vue
Vue是什么
构建用户界面的渐进式框架
只关注视图层（view）
2：vue中两个核心点
vue中两个核心点
1：响应的数据绑定
1）当数据发生改变->自动更新视图
2）利用Object.definedProperty （不兼容IE8）中的setter/getter代理数据，监控对数据的操作
2： 组合的视图组件
1） ui页面映射为组件树
2） 划分组件可维护、可重用、可测试
3：虚拟DOM
运行js的速度是很快的，大量操作DOM就会很慢时常在更新数据后会重新渲染页面造成资源浪费。
4：MVVM模式
M：model 数据模型
V：view 视图模型
VM：view-Model 视图模型
经典例子：(这里是引入vue.js的代码写法)
<div id="demo">
<input type="text" v-model="message"/>
<p>{{message}}</p>
</div>
let data = {message:‘hello,world‘};
var vm = new Vue({
el:‘#demo‘,
data:data
});
5：Vue实例
*vue实例
每一个应用都是通过Vue这个构造函数创建根实例启动new Vue（选项对象）
* 需要传入选项对象，对象包含挂载元素，数据，模板，方法等。
el: 挂载元素选择器 String|HtmlElement
data: 代理数据 Object|Function
methods:定义方法 Object
*vue代理data数据
每个Vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。
* vue 实例自身属性和方法
暴露自身属性和方法：以$ 开头，例如 $el $data....
6：声明式渲染
*声明式：只需要声明在哪里做什么，而无需关心如何实现
*命令式：需要以具体代码表达在哪里做什么，如何实现
var arr = [1,2,3,4,5];
//求数组中每一项的倍数，放在另一个数组中
for(var i=0;i<arr.length;i++){
newArr.push(arr*2);
}
var newArr = arr.map(function(){});
*vue声明式渲染：
arr.map(function(item){
return item*2
});
7：指令
什么是指令
是一种特殊的自定义行间属性
指令的职责就是当其表达式的值改变时相应地某些行为应用到DOM上
在Vue中，指令以v-开头
8：模板
9：vue中的双向数据绑定
1)Vue中的内置指令：
v-bind 动态的绑定数据，简写为：
v-on绑定事件监听器，简写为@
v-text 更新数据，会覆盖已有结构
v-html 可以解析数据中的html结构
v-show 根据值的真假，切换元素的display属性
v-if 根据值的真假，切换元素会被销毁、重建
v-else-if 多条件判断，为真则渲染
v-else 条件都不符合渲染
v-for 基于元数据多次渲染元素或模板块
v-model 在表单控件元素上创建双向数据绑定
v-pre 跳过元素和子元素的编译过程
v-once 只渲染一次，随后数据更新不重新渲染
v-cloak 隐藏未编译的Mustache语法，css中设置[vcloak]{display:none}
2)html模板
基于DOM的模板，模板都是可解析的有效的HTML
插值：
文本： 使用"Mustache"语法，（双大括号）{{value}}
作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
原生的html：双大括号输出的是文本，不会解析html（如果想要解析成html而不是文本，需要在标签中添加 v-html ，v-html="html" 记住 span中不能包含div ）
属性：使用v-bind进行绑定，可以响应变化
使用javascript表达式：写简单的表达式
{{1+2}} {{ture？"yes":"no"}
3)template 字符串模板
template选项对象的属性
模板将会替换挂载的元素。挂载元素的内容都将被忽略
根节点只能有一个（template中只能写一个根节点不能有并列的）
var vm = new Vue({
el:‘#demo‘,
data:{abc:123},
template:`<div>{{abc}}<span>hello</span></div>`
})
将html结构写在一对script标签中，设置type="x-template"
即将template的html写在script中，如：
<script type="x-template" id="temp">
<div>{{abc}}
<span>hello</span>
</div>
</script>
var vm = new Vue({
el:‘#demo‘,
data:{abc:123},
template:"#temp"
})
4)模板 -render函数
render 选项对象的属性
createElement(标签名，数据对象（可省略）,子元素)
绑定的class，值是一个对象，对象的key是class名称，value是一个表达式，能判断出是true还是false；
<div id="demo">
<span :class=‘{red:addClass}‘></span>
</div>
<style>
.red{
background-color:red;
}
.bg{
background:red
}
</style>
var obj = {
addClass:true
}
var vm = new Vue({
el:‘#demo‘,
data:obj,
render(creareElement){
return creareElement(
"ul", //标签名
{
class:{
bg:true
},
style:{
fontSize:"50px"
},
attrs:{
abc:"hello"
}
},
[
creareElement("li",1),
creareElement("li",2),
creareElement("li",3),
]
)
}
})
render 函数第二个参数，数据对象属性：
class:{} //绑定class，和‘v-bind:class’一样的API
style:{} //绑定样式，和 ‘v-bind:style‘ 一样的 API
attrs:{} //添加行间属性
domProps:{} //DOM 元素属性
on:{} //绑定事件
nativeOn:{} //监听原生事件
directives:{} //自定义指令
scopedSlots:{} //slot作用域
slot:{}, // 定义slot名称
key:"key" //给元素添加唯一标示
ref:"ref" //引用信息
10：翻译API地址：https://tech.yandex.com/translate/
11：命令行工具(cli)，用于快速搭建大型单页应用
npm install --global vue-cli
vue init webpack my-project
cd my-project
npm install 加载需要的模块
npm run dev
12: 在线翻译项目总结
1、搭建项目开发环境
2、创建根组件和子组件
3、在根组件中引入translateForm组件，完善此子组件，看组件都包括什么，然后写代码。将这些代码包裹在form中，为form绑定事件，为了提交form中的东西
4、需要拿到输入的内容，使用组件中data方法，定义一个属性，使用此属性通过v-model的方法，将值绑定到input上。
5、将上述拿到的值传递给根组件，通过 this.$emit("方法名（自己随便定义，如formSubmit）")（其实是注册一个事件）
然后在根组件中的translateForm 标签中绑定这个事件，如：<translateForm v-on:formSubmit="事件名"></translateForm>
如事件名为 translateText，此时点击翻译按钮，就能调用tanslateText这个函数了。this.$emit("方法名（自己随便定义，如formSubmit）"，需要传递的参数（如this.textToTranslate）)
参数传递过去之后需要有地方接收，即在tanslateText这个函数中添加形参。
6、上述拿到想要翻译的内容之后，需要进行翻译，这时需要借助翻译的api，需要使用http请求调用接口，使用http就需要安装vue-resource（因vuejs的作者宣布不再继续维护vue-resource，并推荐大家使用axios）。
安装好之后，需要在main.js 中引入该模块，import VueResource form ‘./App‘
引入进来之后，要使用Vue.use(VueResource)
在 tanslateText 中调用接口：
this.$http.get(‘https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20171103T033211Z.f02fec6e631bce1f.d4c2b02b1d3981280c37eba265247f888c3e5215‘)需要传的参数是文本和language
使用.then()接收http的返回值
.then((reponse)=>{
reponse下的body下的text[0]就是我们翻译出来的值
})
将翻译出来的值放到页面中：
在App.vue 的data下返回一个 translatedText属性，然后将response中拿到的值赋值给此属性
将此属性传递给translateOutput，首先在App.vue中引入translateOutput组件，在app.vue中输入
<translateOutput></translateOutput> ，通过v-text绑定translatedText 这个属性，如下：
<translateOutput v-text="translatedText"></translateOutput>，传过来之后，在 translateOutput中定义一个属性 props:["translatedText"],在translateOutput中调用此属性<div id="translateOutput">
{{translatedText}}
</div>
select 中也通过v-model 来传递language的值，作为参数传给根组件，
created 方法不需要调用，默认会执行。
13： www.worktile.com 员工协作的平台
Vue
Vuex 一种状态管理模式
Vue-router
webpack 模块打包工具
NodeJS 运行在服务器端的JavaScript
Express 一个简洁而灵活的node.js Web 应用框架，
提供了一系列强大特性帮助你创建各种Web 应用和丰富的HTTP工具
MongoDB 是一个基于分布式文件存储的数据库，旨在为WEB 应用提供
可扩展的高性能数据存储解决方案。
Mongoose 是在node.js 环境下对mongodb 进行便捷操作的对象模型工具
小插曲： 查找端口号1099的PID 命令：netstat -ano|findstr "1099"
14：Vue.js API
1、全局配置
Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改它的属性。
silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip
未完待续.......
标签：监听器 lis exp 值传递 red ie8 -o min .text
原文地址：http://www.cnblogs.com/WEI-web/p/7799110.html
