1.Vue简介
1.1 概念
渐进式 JavaScript 框架 (渐进式: 可大可小,可简单可复杂,小到可当做一个插件使用,大到可搭建一个完整项目)
插件: 语法简单,功能单一,不能独立使用,要导入项目使用,一般用于实现一个小功能, 例如: swiper.js、animate.css、 echarts.js
语法库: 语法较多, 功能多样, 是很多小功能的集合, 不能独立使用, 需要结合项目使用, 例如 jquery.js
框架: 语法较多, 功能多样, 是很多小功能的集合, 可以单独使用, 可用于构建一个项目, 例如 layui, vue, react
SDK: 软件开发工具包 常用于手机移动开发, 提供一整套模块化功能, 例如:百度地图SDK , 腾讯客服SDK
2.基本用法
2.1 属性绑定 记得引入 vue.js
<style>
.color {
color: red;
}
.border {
border: 1px solid yellow;
}
.font {
font-size: 20px;
}
</style>
<body>
<div id="app">
<p v-bind:id="msg">
通过v-bind进行属性绑定id字段
</p>
<p :class="c1">如果绑定的是字符串,字符串就是类名</p>
<input type="checkbox" name="style" v-model="arr" value="color">
<input type="checkbox" name="style" v-model="arr" value="border">
<input type="checkbox" name="style" v-model="arr" value="font">
上面的input标签绑定的arr里面的每个组员 在arr数组中呈现有或无
<p :class="arr">{{arr}}</p> p标签的class有 color border font
<p :class="obj">这是对象类来绑定的</p> p标签的class有color font
<p :style="obj2">我是 通过对象样式来绑定的</p> p标签的样式绑定
</div>
</body>
<script src="../../vue.js"></script>
<script>
var app = new Vue({
el: '#app', //vue对象和模板进行关联
data: {
msg: "data1",
c1: "color",
arr: ["color", "border", "font"],
obj: {
color: true,
border: false,
font: true
},
obj2: {
color: "red",
"font-size": '100px',
backgroundColor: "green"
}
},
mounted() { //生命周期
console.log("出现了!");
},
watch: {
//arr改变会触发
arr(newValue) {
console.log(this.arr);
}
}
})
</script>
2.2 事件绑定
<body>
<div id="app">
<!-- 1.绑定的时候不带小括号,默认把事件对象传递事件函数里面 -->
<button @click="f1">通过v-on来进行的事件绑定或者@</button>
<!-- 2.@ -->
<button @click="f1(2,$event)">带括号传递参数</button>
<!-- 3.箭头函数 -->
<button @click="f4">箭头函数</button>
<!-- -->
<input type="text" @focus='f5' @blur='f6'>
</div>
</body>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
name: 'zz'
},
obj: {
name: '33'
},
methods: {
//添加模板里面使用的函数
f1(i, e) {
console.log(i + '++++++++');
console.log(e);
console.log(event); //内置的事件对象
console.log(this); //组件对象
//访问自身data
console.log(this._data); //不建议采用
console.log(this.name); //建议这个
},
f4: () => {
console.log(this); //window
},
f5(e) {
e.target.style = "outline:1px solid red"
},
f6(e) {
e.target.style = 'outline:none'
console.log(e);
}
},
})
</script>
2.3 条件判断
<body>
<div id="app">
<p v-if="show">
v-if如果是true,该标签显示,
<!-- 显示和隐藏是:显示创建,隐藏删除! 一般切换频繁的不建议用组件v-if,重复创建删除导致性能减低 vue里面对v-if进行处理,如果删除一个组件,把组件进行缓存一份,如果再次通过v-if显示/创建该组件的时候,这个时候从缓存取出组件,再进行显示,通过从缓存找到删除的组件的方式从而提升v-if的效率 -->
</p>
<p v-else>v-else和v-if条件相反,v-else显示</p>
<button @click="changeshow">点击改变</button>
<input type="text" v-model="score">
<p v-if="score>=80&& score<=100">very good</p>
<p v-else-if="score<80&& score>70"> good</p>
<p v-else-if="score>=60&& score<=70"> low good</p>
<p v-else> bad</p>
<p>{{show?"男":"女"}}</p>
<!-- <p v-show="showup">v-show显示和隐藏组件的指令,通过css样式 display=none来进行元素的显示和隐藏</p> -->
</div>
</body>
<script src="../../vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show: true,
score: 99
},
methods: {
changeshow() {
this.show = !this.show
}
},
})
</script>
2.4 v-for的使用
<body>
<div id="app">
<!-- b 数组元素或者对象 i索引或者关键字 :key属性元素的唯一标识
在更新组件的时候根据key值来去找到要更新的组件,从而提升页面渲染的速率-->
<p v-for="(n,i) in list" :key="i">{{n}}//{{i}} </p>
</div>
</body>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
list: {
obj: {
name: '你好',
age: 25
},
id: 1,
name: "vue从入门到放弃"
}
},
})
</script>
2.5 其他指令
<body>
<div id="id">
<!-- 指令修饰符:对一些vue指令,再加上一些限制 -->
<p>{{count+98}}</p>
<!-- number:可以把数据转换成数字,一般用在指令后面 -->
<input type="text" v-model.number="count">
<input type="text" v-model.number="a">+
<input type="text" v-model.number="b">={{a}}
<br>
<!-- lazy:失去焦点之后触发 trim是卡头去尾去空格 -->
<input type="text" v-model.lazy.trim="c">
<p>{{c}}</p>
<!-- 阻止事件的默认事件, stop是阻止事件冒泡 -->
<a href="http://www.baidu.com" @click.prevent.stop="f2">百度</a>
<!-- keydown.b 可以判断按下的按键触发 -->
<button @keydown.ctrl="f2">
键盘事件
</button>
<!-- 以上是指令修饰符 -->
<!-- ------------------ -->
<p>{{msg}}</p>
<!-- v-html可以解析标签和v-text不可以 -->
<p v-text="msg"></p>
<p v-html="msg"></p>
<!-- v-pre 允许我们在渲染的时候把{{}}当成普通的字符 -->
<p v-pre>{{你好</p>
<input type="text" v-model="c">
<!-- 只允许渲染一次 数据更新了视图不更新 -->
<p v-once>{{c}}</p>
<!-- vue在解析插值运算的时候有一个编译的过程,频繁的刷新会出现{{}}闪烁的情况,解决的时候v-cloak -->
<p v-cloak>{{c}}</p>
<p v-cloak>{{count}}</p>
</div>
</body>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: '#id',
data: {
count: '98745',
a: '123a',
b: 12,
c: 10,
msg: "<h1>hello</h1>"
},
methods: {
f2() {
console.log('f2');
},
},
computed: {
}
})
</script>
以上是vue的一些基础用法
下次的内容也是基础