半年前看了vueJs的视频，没有实际操作过，最近又开始着手学习了Vue，在这里记录我的学习过程，方便日后自己查阅
官网：VueJs的官网
VueJs的安装和初始化项目：
npm install --global vue-cli # 全局安装 vue-cli
npm install -g webpack
vue init webpack my-project # 创建一个基于 webpack 模板的新项目
cd my-project
npm install # 安装依赖，走你
npm run dev
防止页面数据层闪烁 v-cloak
v-cloak
VueJs的实例：
<div id = "app">
<p>{{ msg }}</p> // {}
<p>{{ number + 1 }}</p> //模板语法中是可以写表达式的
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
<p v-text = "msg"></p>
<p v-html = "msg"></p>
<div v-on:click="dosomething">事件绑定</div> //事件绑定
<div @click="dosomething">事件</div> //事件绑定简写 @keyup.enter 指定回车键触发函数
<formv-on:submit.prevent="onSubmit"></form> //.prevent修饰符告诉v-on指令对于触发的事件调用 event.preventDefault
<div v-if="istrue">是否渲染</div> //条件渲染
<div v-else>no</div> //可以使用v-else指令来表示v-if的“else 块”
<div v-show="isshow">是否显示</div>
<div v-for="item in items" :key="item.id"> //循环绑定 ,加key值数据更新时进行排序
<p v-text="item.name"></p>
</div>
<div v-for=" (item, index) in items"> // 还可以循环对象 <div v-for=" (value, key) in object">
<p>{{ item.name : index }}</p>
</div>
<img v-bind:src="imagesrc"> //属性绑定
<div :id= "divId"></div>
<div v-bind:id = " 'list-' + id "></div>
<div :class= "{ red : isRed， seqBox : true }"></div> //属性绑定简写
<div :class=" index < 5 && 'top' " > </div> //当index<5时，class可以取top值
<div :class= "[ classA , classB ]"></div>
<div :class= "[isActive ? activeClass : '', errorClass]"></div>
<div :class= "[ classA , { classB : isB, classC : isC }]"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
</div>
数据层：
var vm = new Vue({
el: "#app",
data: { //数据
a: 3,
msg: "你好",
activeColor: 'red',
fontSize: 30
styleObject: {
color: 'red',
fontSize: '13px'
}
},
mounted: function(){ //生命周期，就是1.0中的ready
this.$nextTick(function () { //这样是比较保险的
}）
},
filters: { //自定义过滤器
capitalize: function (value) {
if (!value) return ' '
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
},
methods:{ //方法
dosomething: function() { }
},
watch: {
'a' : function (val, oldval ) { } //监听数据a的变化，新的值和旧的值
},
computed: { //计算属性
classObject: function () {
return{
active:this.isActive && !this.error,
'text-danger':this.error &&this.error.type ==='fatal'
}
}
}
})
条件渲染1
条件渲染2
数组数据更新
数据更新注意事项
添加响应属性
v-for 显示过滤排序：
v-for显示过滤排序
v-for也可以用在template上进行渲染多个元素
v-for与v-if同事作用一个元素上时，v-for的优先级高于v-if,如下：
v-for与v-if
组件：
组件都是以 .vue结尾的；
组件的通讯：
传固定字符串：
传固定字符串
固定字符串驼峰法
动态传值
传一个对象：
组件动态传对象
组件 prop验证：
prop验证
子组件向父组件通讯： $emit()
$emit
组件 .sync修饰符:
.sync修饰符
非父子组件通讯：
费父子组件通讯
父子组件单个插槽：
单个插槽
具名插槽：
具名插槽1
具名插槽2
子组件索引：
子组件索引
组件的声明与使用：
组件的声明与使用
网友评论