HTML5-vue.js

vue

vue不能在html和body内直接渲染数据，可以在页面上直接修改数据，不需要刷新

v-model实现双向数据绑定，在控制台输入vm.message=”..”,可以实现数据的修改，也可以用js代码，不需要刷新页面

v-bind,v-on执行的必须是一个函数，如图methods中的函数，bind不点击就直接执行，on需要点击才能执行，当v-bind:href绑定href时，取的是url的地址，需要点击才能跳转

当鼠标移动到p标签上时，就会显示message的内容

双向数据绑定，通过vm.$watch监听

模版语法的差值
v-once意思就是只渲染最初的一次，当数值修改时，不发生改变

v-text,v-html

v-bind对href,src的绑定

渲染文本的js表达式
可以是表达式，bol,或者三目运算

v-for可以对数组对象和json对象进行遍历，注意数据的抒写形式

v-for在对数组对象遍历时，如果想取下标，最好把值放前面，下标放后面（item,index） in items.在对数组进行改变时，可以用push,pop,shift,unshift.

用v-for进行列表渲染
如果是数组[‘aa’,’bb’,’cc’], i in items i就是数组的每一个元素
(i,index) in items index表示数组角标

如果是对象 obj:{
name:’王磊’,
age:65,
length:156,
}
value in obj value就是 对象每一个属性值
(value,key) in obj 此时key就是键

(value,key,index) in obj 顺序最好别乱写 值 键 索引
第一个为值 第二个 为键 第三个为索引





Template模板标签，不会被渲染，但是在template里面的标签会被整体渲染，空格折叠 多个空格按一个处理

v-if根据bol值判断显示，或隐藏标签 v-else与其相反，
在后台输入vm.flag=false或者vm.flag=””,在js中加引号里面写任何东西，没定义的话都默认为bol值的true,若加了引号没写东西，或者是null,undefined，没定义的话就默认为bol值的false. –if如果为false则显示else v-else 上面必须是v-if else和if之间不能有其他元素

过滤器
用函数方法实现过滤

v-bind 绑定类名
v-bind绑定class,可以一个，多个，也可以是数组，也可以系应该指定类改变样式，也可以是三目表达式
v-bind:class=”{‘要添加的class名’:布尔表达式}”

v-bind 绑定内联样式
可以直接设置，通过参数设置，样式对象，数组中的对象。通常用样式对象更好，更清晰

key 的管理
如果当前元素不添加key 那么在进行渲染切换时 系统会自动根据同一个元素的内容进行复用同名元素，会把之前用户操作的信息重新放到新渲染的元素里面去，所以我们要添加一个key，告诉系统不要复用，key要保持不一致.对于textarea，不加key,它的value也不会渲染

v-show
v-show只是改变css中display的值，标签一直都是存在的。

json数据渲染

数组重塑

Splice,返回从指定元素到最后，以数组的方式返回。
Sort以数组形式返回排序后的数据
注意两点 修改长度 和修改指定元素 页面不会被刷新

7-20pm

自己学习一下 webpack es6

解决花括号渲染问题—v-text,v-html

事件

go不加括号，在methods方法中，用go(){},代替go:function(){}

事件对象–$event

事件冒泡，阻止事件冒泡
事件冒泡 子元素接收到事件以后 如果父元素也有对应事件 也会同样触发
那么如何阻止事件冒泡呢?
1.通过事件对象阻止

2.vue给我们提供，在事件绑定后加上后缀.stop

阻止默认事件—两种方式
默认事件 一般是浏览器给我们提供的
@contextmenu 右键监听
阻止默认事件
1. 原生—ev.preventDefault()

2.vue提供，在右键监听事件后加后缀.prevent

键盘事件，可加对象，可加后缀可以使键盘敲击指定的后缀名时触发事件
keydown和 keyup的区别
down 是先触发 在显示
keyup 先显示 在触发

ev.keyCode是键盘敲击的字母的ASC码.
键盘敲击箭头上下左右有默认事件，按左光标会移动，按上光标会跑到最前面，因此要阻止默认事件
敲击A,bc,d等字母没有默认事件。

 

服务器交互—-三种方式—重要
要引入官方插件，百度github.com/vuejs/插件名
引入vue-source.js便可以使用


Npm是nodejs的包的管理者
方式一：Get传参数
$http是vue实例下的一个元素 跟el data是一个性质 get this.$http.get(‘url’).then(函数1(成功) , 函数2(失败))
拼接参数 url? 参数

Post传三个参数
this.$http.post(‘url’).then(函数1(成功) , 函数2(失败))
传参数 post(url,{参数},{ emulateJSON:true, 拼接post访问的请求头(application…)})

Josnp
一旦url跨域的callback名称不同 则需要以下代码 加到jsonp(参数)
jsonp:’cb’
默认callback

计算属性—
Computed，计算属性 有些时候我们的其中一个属性 是通过一段代码来计算出来的
而我们data下面又不能直接写代码 所以我们要用到这computed 元素
如果我们通过代码修改b的值，视图是不会发生变化的
b的赋值是通过两个函数set和get方法
get方法就是原来直接冒号带return的赋值方法
set方法是我们通过代码给b赋值触发的方法
在set中给b赋值 是死循环，

挂载$mount()

自定义属性和方法—–$options


调用自定义属性和方法用$options

组件渲染—–重要
组件渲染是会忽略原本写在页面上面的数据 会把模板数据全部替换到页面上
1. 第一种渲染方式
全局组件渲染
var aa=Vue.extend({
template;’组件模板’
})
Vue.componet(‘自定义组件名称’,模板实例 aa)
什么是全局组件:
能够在多个vue实例的容器里面使用
组件的前提 必须放到一个vue实例容器里面去渲染
比如#app2只要是个实例就可以运行aaa标签了


局部组件渲染
需要制定在哪一个vue实例下面渲染
那么该组件只能放在当前vue实例下面才会生效
在指定的vue实例里面写
components:{
‘自定义标签名’:模板对象,

组件渲染—新的渲染方式–重要

2.0推荐的渲染方式
单组件渲染分为两种方式
1、单组件全局组件
Vue.component(‘组件名’,{
template:’组件模板’
});
2.单组件局部组件渲染
在任意vue实例下面
components:{
‘组件名称’:{
template:’组件模板’ }
}

不能带两个根组件

多个组件渲染
推荐使用template标签，在任意地方 写我们要渲染的组件模板只要不是 vue实例即可。

• 
  
• 新闻1
• 新闻2
• 新闻3

需要加一个id
多组件全局渲染:
Vue.component(‘组件名称’,{
template:’template标签的id选择器’
});
多组件局部渲染:
components:{
‘自定义组件名称’:{
template:’id选择器 template的id’
}
}

组件模板
1. template:’模板’
2.
组件模板 有代码提示

3.
创建一个模板对象 vue2.0 推荐
var home={
1).template:’直接写标签’
2).template:’id选择器 template标签’ };
渲染全局
(1) var home={
template:’标签模板’
};
Vue.component(‘自定义组件名’,组件对象);
(2)推荐的完整方式 !!!!!!!!!
1).创建template标签模板

组件模板 有代码提示

2). 创建组件对象 关联 id选择器
var home={
template:’id选择器’};
3).渲染全局和局部
全局:
Vue.component(‘组件名称’,组件对象)
局部:
components:{
‘组件名称’:组件对象, }

渲染组件事件以及参数-
单个组件
全局组件参数的渲染
Vue.component(‘aaa’,{
data:function(){
return{
msg:’我是组件对象的属性’,};},
template:’

我是全局组件 — >{{msg}}

‘});
局部组件
components:{
‘mycom’:{
data(){
return {
kk:’局部组件参数’};
},
methods:{
show:function(){
alert(‘局部组件事件!’);
}
},
template:’