Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
1、引入vue.js
方法1:引入在线链接
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
方法2:下载vue.js,引入本地文件
<script src="./vue.js"></script>
2、页面准备一个容器给vue实例接管
<div id="app">
<span>{
{msg}}</span>
<h1>你的年龄是{
{age}},你是{
{text()}}</h1>
<h2>{
{age<18?'未成年人':'成年人'}}</h2>
</div>
3、vue 实例接管这个容器:new Vue({el:"容器css选择器"})
--
vue 实例接管容器的时候会产生一个和容器一样的节点,来替换接管的容器。
const vm = new Vue({
el:'#app',
data:{
msg:'hello world',
age:12
}
methods:{
text(){
if(this.age<16){
return '儿童'
}else if(this.age<24){
return '少年'
}else if(this.age<60){
return '青年'
}else{
return "老年"
}
}
})
1)el:是一个css选择器,是字符串,就是vue实例要接管的元素(只在用 new
创建实例时生效);
-- 如果没有设置 el 选项,可以通过 vm.$mount('容器 css 选择器')来挂载元素;
-- el 的优先级高于$mount;
2)data属性:可以是一个对象,或者一个函数(),推荐使用函数,可以定义键值对
-- 键名: html里面可以使用的变量名;成员值: 变量值;
-- data里面定义的变量名的独特:变量值改变,视图会自动同步;
-- data里面定义的变量可以在vue实例的$data属性上看到和操作;
3)methods:后面是一个对象,里面可以定义html里面要使用的方法;
-- 在方法内部可以使用data里面的变量;
-- 在方法内部,this指的就是vue实例对象(在vue接管html元素里面,所有的this都可以省略);
-- 语法: vue实例对象.变量名;
4)template:里面是html字符串,可以用于替换el对应的dom节点
-- template和outerHTML的区别:
- outerHTML就是html,要遵循html的语法规范,不区分大小写, template可以区分大小写;
- template的优先级高于el的outerHTML;
template:`
<div id="tem">
<h1>我是template里面书写的内容</h1>
<h1>{
{msg}}</h1>
</div>`
5)v-bind:用于绑定数据和元素属性
语法: v-bind:标签的属性名="属性值,属性值是js表达式"
或简写为 :标签的属性名="属性值,属性值是js表达式"
-- vue给属性中的class属性和style属性专门提供了:
数组语法:
v-bind:class="['a','b','c']" //同时有a,b,c三个类名
v-bind:style="[{backgroudColor:'red',border:'30px solid #ccc'},{margin:'30px'}]"
对象语法:
v-bind:class="{a:true,b:false,c:true}" //同时有a,c两个类名,没有b类名
v-bind:style="{backgroudColor:'red',border:'30px solid #ccc'}"
结合使用:
v-bind:class="['a',{b:true},{c:false}]" //同时有a,b两个类名,没有c类名
6) v-on 指令 : 监听 DOM 事件,并在触发时运行一些 JavaScript 代码
写法1:v-on:事件类型 = "事件处理函数"
写法2:v-on:事件类型 = "事件处理函数()"
说明:无论哪种写法,事件处理函数不会立即执行,触发事件时才执行;
v-on可以简写成@
写法1:@事件类型 = "事件处理函数"
写法2:@事件类型 = "事件处理函数()"
-- 事件处理函数里面的this是:当前的vue实例对象
<div class="movearea" @mousemove="moveHanlder($event)"
v-bind:style="{backgroundColor:`hsl(${x},80%,50%)`}">
</div>
-- 事件处理函数可以传入实参,$event有固定含义,就是事件对象
<button v-on:click="clickHandler($event)">点我试试!!</button>
7)v-if 指令:用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 truthy 值时被渲染
v-if='js表达式',经常配合v-else指令使用,v-if不满足的时候,就显示v-else里面的内容;
<!-- 放在单个标签上 -->
<h1 v-if="age>=18">成年人</h1>
<h1 v-else>未成年人</h1>
<!-- 放在多个标签集合上 -->
<template v-if="age>=18">
<h1>你是成年人了</h1>
<h1>你要承担养家糊口的任务了</h1>
<h1>你不可以过儿童节了</h1>
</template>
v-show :用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 truthy 值的时候被渲染
v-show='js表达式'
v-if 和 v-show的区别 :
-- v-if 通过插入或者移除实现元素的显示和隐藏,v-show 通过css的display:none/block实现元素的显示和隐藏;
-- v-if 可以用于template元素,v-show 不可以用于template元素;
8)v-for 列表渲染:哪个元素要循环,就在哪个元素上添加v-for指令;
-- v-for要配合key标签属性使用,每个循环的元素的key的值必须是唯一的字符串或者数字;
语法1: v-for="item in arr"
-- item就是循环到的那个数组元素,arr就是要循环的数组;
语法2: v-for = "(item,index) in arr"
-- item就是循环到的那个数组元素,arr就是要循环的数组,index就是循环到的数组元素的下标;
语法3: v-for="val in obj"
-- obj就是要循环的那个数组,val就是循环到的键值对的值;
语法4: v-for="(val,key)in obj"
-- obj就是要循环的那个数组,val就是循环到的键值对的值,key就是循环到的键值对的键名;
语法5: v-for="(val,key,index)in obj"
-- obj就是要循环的那个数组,val就是循环到的键值对的值,key就是循环到的键值对的键名,index就是循环到的键值对的索引,在各个浏览器里面可能表现不同;
<li v-for="(item,index) in list" v-bind:key="index">
我的名字是{
{item.name}},我的年龄是{
{item.age}}
</li>