-
v-指令集
概念： html标签中带有 v- 前缀的特殊属性
一、v-model（双向绑定）：
双向绑定即M变化的同时，V也变化，反之亦然。
二、v-html：
解析M中的HTML标签语句
三、v-cloak（闪现）：
F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，产生插值表达式加载时闪烁<style>[v-cloak]{display: none;}</style> <div id="app" v-cloak></div>
注： 一对[]括起来的是属性选择器
四、v-if（判断）：
根据表达式 的值( true 或 false )来决定是否插入，
注：
1.可以跟v-else-if和v-else联用，其中v-else后不加属性值
2.三者顺序应该合理
五、v-for（循环）：
通过遍历数组的数据来渲染一个项目列表
1.o in 数组：返回对应的元素o
2.o,i in 数组：返回对应的元素o,下标i
3.(o,i) in 数组：返回对应的元素o,下标i
六、v-show（显示）：
满足条件则显示，不满足则不显示，利用css控制不满足的话设置display: none;，和v-if不一样，v-show只是不显示而已
七、v-on（事件）：
用于调用vue中的方法
八、v-bind（跳转）：
当属性的值是变量而不是字符串时，通过标识，vue会自动处理，全称: v-bind:href，简称： :href
<body>
<div id="demo">
<p>{{adr}}</p>
<!-- 解析HTML -->
<p v-html="adr">{{adr}}</p>
<!-- 双向绑定 -->
<input type="text" v-model="adr"/>
<!-- 判断 -->
<p v-if="person.age<18">未成年</p>
<p v-else-if="person.age>=18 && person.age<50">壮年</p>
<p v-else>中老年</p>
<!-- for循环 -->
<p v-for="o in array">{{o}}</p>
<p v-for="o,i in array">下标{{i}}处对应的数据是：{{o}}</p>
<!-- on事件 -->
<input type="button" v-on:click="eat()" value="开吃"/>
<button v-on:click="i++">点赞:{{i}}</button><br />
<!-- bind跳转 -->
<a v-bind:href="url">{{name}}</a>
<a :href="url">{{name}}</a>
</div>
<script>
new Vue({
el:"#demo",
data:{
adr:"<p>四川泸州</p>",
i:1000,
url:"http://www.baidu.com",
name:"百度",
person:{
age:48
},
array:[1,"zzq","zmm",true]
},
methods:{
eat(){
console.log("正在大口吃肉");
}
}
})
</script>
</body>
-
组件
全局组件语法格式：Vue.component(tagName,options),使用后可以通过tagName标签来调用组件，类似与html标签的扩展
注： 先绑定组件，再注册对象
<body>
<div id="app">
<sharbee></sharbee>
<!-- 局部组件的使用 -->
<animal></animal>
</div>
<!-- 全局组件的使用 -->
<div id="ppa">
<sharbee></sharbee>
</div>
<script>
// 全局组件
Vue.component("sharbee",{
template:"<img src='../img/1.webp'>",
})
new Vue({
el:"#app",
// 局部组件
components:{
animal:{
template:"<p>zhoumm</p>"
}
}
})
new Vue({
el:"#ppa"
})
</script>
</body>
-
构建vue项目
lifecycle+npm+webpack
lifecycle生命周期： 可分为3个阶段，共8个钩子：初始化（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/后）
npm（nodejs包管理器）： 通过npm命令下载资源
webpack（前端自动化构建工具）： 基于nodejs实现自动构建vue项目
-
vue-cli脚手架
用于自动生成vue.js+webpack的项目模板