VueJs学习笔记
Posted YangBin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueJs学习笔记相关的知识，希望对你有一定的参考价值。
在cmd下，进入目录之后
cd 到项目目录下
1 安装node
cnpm install
2 启动或者调试
cnpm start （或是npm run dev）
3
上线:
npm run build
--------------------------------------------------------------------
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
------------------------------------------------------
# install dependencies npm install # run server npm start
-----------------------------------------
vue全家桶的成员是：vue-cli,vuex,vue-router,vue-axios(vue2.0)。
第三方插件：vue-scroller,vue-lazyload,vue-awesome-swiper(轮播插件)等等的。
---------------------------------------------------------------------------------
element-ui：作用切换主题，给其换肤
mint-ui：由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库
vue-scroller：谁需要进行上拉加载下拉刷新就给谁加
vue-router是Vue.js官方的路由插件,路由用于设定访问路径，并将路径和组件映射起来。
vue-axios：请求后台接口.：发起http请求
vue-resource：请求后台接口
vue-cli脚手架构建工具打开命令行工具输入：npm install vue-cli -g，使用vue-cli来构建项目（帮你提供好基本项目结构）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。实现不同组件之间的状态共享
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
vue-loader 是一个 webpack 的 loader，可以将用下面这个格式编写的 Vue 组件转换为 javascript 模块
webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出它们的依赖关系，将它们打包为可部署的静态资源。(App.vue -> 变成正常代码 )
----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------
（从其他网址转载的这个图片，见谅）
---------------------------------------------------------------------------------------------------
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({ // 选项 })
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例子如下
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: \'#vue_det\',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>") // true
document.write(vm.$el === document.getElementById(\'vue_det\')) // true
</script>
el:\'#box\',//el 是选择器. 是挂载点,接下来的改动全部在以上指定的 div 内，div 外部不受影响。
data 用于定义属性
methods 用于定义的函数，可以通过 return 来返回函数值。
v-model :一般表单元素(input) 双向数据绑定
v-for ="value in a arrar": 循环数组
v-for="value in json" ：循环json
{{value}} 值 ; {{$index}} 序号; {{$key}} key值。{{ }} 用于输出对象属性和函数返回值。数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
v-on:click="show()" ： 单击事件
显示隐藏:v-show=“true/false”
使用 v-html 指令用于输出 html 代码
v-bind ： HTML 属性中的值应使用 v-bind 指令。
.缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
指令是带有 v- 前缀的特殊属性。
computed
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
watch 监听属性
Component 组件可以扩展 HTML 元素，封装可重用的代码。
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
使用 $emit(eventName) 触发事件
----------------------------------------------------------------------------------------------------------
属性:
v-bind:src=""
width/height/title....
简写:
:src="" 推荐
<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求
------------------------------------------------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是数据
:class="[red,b,c,d]"
:class="{red:a, blue:false}"
:class="json"
data:{
json:{red:a, blue:false}
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"
---------------------------------------------------------------------------------------------------
过滤器:-> 过滤模板数据
系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{\'welcome\'| uppercase}}
lowercase
capitalize
currency 钱
{{msg| filterA 参数}}
....
-----------------------------------------
-----------------------------------------
交互:
$http （ajax）
如果vue想做交互
引入: vue-resouce
get:
获取一个普通文本数据:
this.$http.get(\'aa.txt\').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get(\'get.php\',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post(\'post.php\',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp(\'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su\',{
wd:\'a\'
},{
jsonp:\'cb\' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
-----------------------------------------
交互:
$http （ajax）
如果vue想做交互
引入: vue-resouce
get:
获取一个普通文本数据:
this.$http.get(\'aa.txt\').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get(\'get.php\',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post(\'post.php\',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp(\'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su\',{
wd:\'a\'
},{
jsonp:\'cb\' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
---------------------------------------------------------------------------------------
页面的跳转：
<router-link to="/product/24" class="col-50">
<img src="/static/images/product-1.jpg" class="img-responsive"/>
<p>马来西亚浓缩金丝燕窝</p>
<span class="red">￥123元</span>
</router-link>
在router.js文件如下：
import Product from \'./views/product.vue\'
{
path: \'/product/:productId\',
name: \'product\',
component: Product
}
-----------------------------------------------------------------------------------------------------
vue生命周期:
钩子函数:
created -> 实例已经创建 √
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
----------------------------------
用户会看到花括号标记:
v-cloak 防止闪烁, 比较大段落
----------------------------------
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html
----------------------------------
ng: $scope.$watch
计算属性的使用:
computed:{
b:function(){ //默认调用get
return 值
}
}
--------------------------
computed:{
b:{
get:
set:
}
}
* computed里面可以放置一些业务逻辑代码，一定记得return
---------------------------------
vue实例简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序
vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态
---------------------------------
循环：
v-for="value in data"
会有重复数据？
track-by=\'索引\' 提高循环性能
track-by=\'$index/uid\'
---------------------------------
---------------------------------
过滤器:
vue提供过滤器:
capitalize uppercase currency....
debounce 配合事件，延迟执行
数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
filterBy 过滤数据
filterBy ‘谁’
orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序
自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){
});
时间转化器
过滤html标记
双向过滤器:*
Vue.filter(\'filterHtml\',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,\'\');
},
write:function(val){ //view -> model
return val;
}
});
数据 -> 视图
model -> view
view -> model
---------------------------------
v-text
v-for
v-html
指令: 扩展html语法