今天做的事
类比angular学习了vue
做了两个小demo来尽快熟悉
一个简单的表单demo吧算是，还有一个jsonp请求的demo
用的百度的接口，简单的搜索框下拉改样式点击跳到百度搜索，本来是想用google的
小飞机坠机了，，，
明天计划
继续学习
收获
vue采用简洁的模板语法来声明式的将数据渲染进 DOM，响应式，可在控制台中操作，实时刷新dom
在实例化 Vue 时，需传入一个选项对象
所有的 Vue.js 组件其实都是被扩展的 Vue 实例。
一个Vue应用的起步都是使用全局构造函数Vue 创建一个 Vue的根实例。该函数的参数是一个js对象（键值对，选项对象），一般的指定键为 el, data, methods;el是一个css选择器，代表这个Vue实例对应的dom节点，比如 ‘#app’; data是这个实例持有的数据，它是一个js对象，其成员的键绑定DOM节点中同名的符号，methods是方法的集合，也是一个js对象，其键是方法名，值为一个函数。
一个Vue实例其实正是一个 MVVM模式中的ViewModel，可以将一个实例保存为一个本地变量，用于对该节点的引用。
例
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
常用
el：选择器，选择其作用域
data：数据
methods：方法
v-model双向绑定
v-model 一般表单 双向
v-for 循环$index同样。循环对象同样$key输出对象的key
写法同样，对象可用v-for：“（k，v） in json”可循环其键和值
事件
v-on：click=“事件函数”，从methods中定义
v-on:click/mouseout/mouseover/dblclick/mousedown.....
（v-on：）部分可简写为@ -----(附带$event事件对象，可以用来比如阻止冒泡，内符合原生写法)
如@click=“haha（$event）”
function(ev){
console.log(1)
ev.cancelBubble=true
}
vue自带简写
@click.stop=“haha（）”
methods中的函数，this指向为当前对象，上例中即为app，比如function中this.message
然而若console.log（this.data）则undefined
v-show=“布尔”
不同于angular无法在其ng-app定义的区域内使用其他框架或原生的写法，vue可以做到这一点
<button onclick="a()">a</button>
<script type="text/javascript">
function a() {
alert(1)
}
</script>
在angular中不可行，在vue中可行
控制属性
v-bind：src=“url”绑属性
简写 ：src=“url” 前加“ ： ”即可
不要用src={{url}}之类
class和style特殊
写法如
<button :class="[btn,btnPrimary]" v-on:click="del($index)">删除</button>
此时数组中为date内的数据
btn:"btn btn-sm",
btnPrimary:"btn-primary"
或者可以
<button :class="{btn：true，btnPrimary：false}" v-on:click="del($index)">删除</button>
这就很像ng-class了，后面接判定条件
<button :class="json" v-on:click="del($index)">删除</button>
date内
json：{btn：true，btnPrimary：false}
模板，三种写法
{{双向绑定}}---{{*只绑定一次}}---{{{可解析成真正的HTML}}}
模板内可用过滤器
{{ date | filter 参数 }}filter后空格接参数，不同于angular中：参数
http vue本身并不支持，需引入vue-resouce
当引入vue-resouce时，相当于往var出来的实例中添加了一个方法
此时methods的function中的this身上就可以
this.$http.get("url").then(function(res){
alert(res.data) //成功
},function(res){
alert(res.data) //失败
})
vue语法采用的是promise规范
var params = {要发送的json数据}
this.$http.get("url"，params).then(function(res){
alert(res.data) //成功
},function(res){
alert(res.data) //失败
})
post方法则注意需要加第三个option配置，头信息
this.$http.post(url,params, {emulateJSON：true} )
模拟json
jsonp类似post，配置信息内{ jsonp：“callback名字 ” }，根据接口配置，默认为callback
困惑
el既然是css选择器但是我如果使用类选择器的话只有第一个class好使，其他的都不好使
控制台console.log(vm.$el)也只获取了第一个class为class的元素
所以他是故意的吗，，，
返回列表
评论