Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue特点
(1)遵循 MVVM 模式；
(2)编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发；
(3)它本身只关注 UI, 也可以引入其它第三方库开发项目。
Vue使用
方式一：直接CDN引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>方式二：下载和引入
// 开发环境 https://vuejs.org/js/vue.js
// 生产环境 https://vuejs.org/js/vue.min.js方式三：NPM安装
npm install vueVue模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>Hello {{name}}</h1>
</div>
</body>
<script>
var vm = new Vue({ //这个Vue对象用来控制某一个标签里面的数据
el:"#app", //要控制的标签
data:{
name:"BanQ", //定义一个数据，在id为app的标签内部去使用
}
})
</script>
</html>代码分析如下：
(1)先看js代码，首先是创建了一个Vue实例；
(2)创建Vue实例的时候，传入了一个对象：{}
{}中的el属性：该属性决定了这个Vue实例挂载到哪一个元素上，很明显，我们这里挂载到了id为app的元素上。
{}中包含了data属性：该属性中通常会存储一些数据，好像上面例子中的name就是直接定义出来的数据
Vue常见的语法格式
Vue模板语法有2大类:
(1)插值语法: 功能:用于解析标签体内容写法:{{xxx}} xxx是js表达式,且可以直接读取到data中的所有属性。
(2)指令语法: 功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....) . 举例: v-bind : href="xxx” 或 简写为 :href= "xxx" ， xxx同样要js表达式，且可以直接读取到data中的所有属性。 备注:Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。
插值语法
<div id="app">
<p>{{ str1 }}</p>
<p>{{ str1.split("").reverse().join("") }}</p>
<p>{{num+1}}</p>
<p>num1和numn2的最大值是：{{ num1>num2 ? num1 : num2 }}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
str1:"hello",
num:20,
num1:40,
num2:80
}
})
</script>指令语法
v-bind控制标签属性
<div id="app">
<a v-bind:href="bd">百度</a>
<a :href="tb">淘宝</a>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
bd:"https://www.baidu.com",
tb:"https://www.taobao.com"
}
})
</script>v-on事件格式
<div id="app">
<p>{{num}}</p>
<button v-on:click="num+=1">点我数字增加</button>
<button v-on:click="add">点我数字加5</button>
<button @click="add2(10)">点我数字加10</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num: 20
},
methods:{
add:function(){
this.num += 5
},
add2(){
this.num += 10
}
}
})
</script>定义Vue对象基本格式总结
var vm = new Vue({
el: "要绑定的标签",
data: {
变量名1：值1,
变量名2：值2,
变量名3：值3,
...
},
methods: {
方法名1: function(){
},
方法名2: function(){
},
方法名3: function(){
}
}
});data 和 el 的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建vue实例，随后再通过vm.$mount ( ' #root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
3.一个重要的原则; 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了.
Vue控制类名和style样式(动态控制类名）
<div id="app">
<!--控制标签的类名 :class= 的值可以是 js对象 {类名：布尔值} -->
<div class="box" :class="{box1:bool1, box2:bool2}"></div>
<!--控制标签的类名 :class= 的值可以是 数组 [类名1，类名2] -->
<div class="box" :class="['box3', 'box4']"></div>
<!--通过控制bool3位真还是假，来控制这个盒子有还是没有current这个类-->
<div class="box" :class=" bool3 ? 'current':'' "></div>
<div :style="{fontSize:'40px' }">文字</div>
<div :style="{ fontSize:false?'40px' : '50px'}">文字</div>
<div :style="[{fontSize:false?'40px' : '50px'},{background:'pink'}]">文字</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
bool1:true,
bool2:false,
bool3:true
}
})
</script>v-if和v-show指令
v-if 和v-show都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制，v-if是对dom节点的控制。
<div id="app">
<!-- v-if指令的作用： 控制标签是否展示，不展示则删除-->
<!--<div v-if="bool1">1111111</div>-->
<!--<div style="display:none">2222222</div>-->
<!--bool1的值为true 第一个盒子被保留，删除第二个盒子，
为false的话，第2个盒子保留，删除第1个盒子-->
<!--<div v-if="bool1">11111</div>-->
<!--<div v-else>222222</div>-->
<!--<div v-if="type=='a'">11111</div>-->
<!--<div v-else-if="type=='b'">2222</div>-->
<!--<div v-else-if="type=='c'">3333</div>-->
<!--<div v-else>4444</div>-->
<!--不会删除标签，根据bool1是true还是false决定盒子是显示还是隐藏(在控制display属性的值)-->
<div v-show="bool1">v-show的用法</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
bool1: false,
type: "z"
}
})
</script>点击收藏按钮案例：
<!-- <button v-if="!collectStatus" @click="collectStatus=!collectStatus">点击收藏</button>
<button v-else @click="collectStatus=!collectStatus">取消收藏</button> -->
<button v-show="!collectStatus" @click="collectStatus=!collectStatus">点击收藏</button>
<button v-show="collectStatus" @click="collectStatus=!collectStatus">取消收藏</button>
<script>
var vm = new Vue({
el:".tab_con",
data:{
num:1,
collectStatus:false
}
})
</script>列表和对象的渲染
<div id="app">
<ul>
<!--i是列表中的每一个数据-->
<li v-for="i in list1">{{ i }}</li>
</ul>
<ul>
<!--i是列表中的每一个数据 j是每一个数据的下标-->
<li v-for="(i, j) in list1">{{ i }} {{ j }}</li>
</ul>
<ul>
<!--i是my_obj对象中的值-->
<li v-for="i in my_obj">{{i}}</li>
</ul>
<ul>
<!--i是my_obj对象中的值 j是my_obj对象中的键名-->
<li v-for="(i, j) in my_obj">{{i}} {{j}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list1: ["javascript", "html", "css", "vue", "react"],
my_obj: {
name: "javascript",
age: 24
}
}
})
</script>Vue数据绑定
Vue中有2种数据绑定的方式: 1.单向绑定(v-bind):数据只能从data流向页面； 2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
注意: 1.双向绑定一般都应用在表单类元素上（如: input、 select等)； 2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。
表单数据绑定(双向数据绑定)
v-model的值是，vue接收表单元素的值的变量名， 即v1的值就是用户填写的内容 (甚至可以在data中设置v1的值，从而设置表单元素的默认值)
<input type="text" v-model="v1">
<div>{{v1}}</div>具体代码：
<div id="app">
<input type="text" v-model="txt1"> <!-- v-model表示了用户输入的这个数据-->
<p>{{ txt1 }}</p>
<select v-model="sel1">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
</select>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
//通过改变txt1或者sel1，来使对应的表单元素的v-model的值发生了变化，所以这个表单元素的value就变化了(v-model看成我们之前将的value)
txt1: '默认值',
sel1: 0
}
})
</script>Vue中的MVVM
什么是MVVM
(1)View层：
视图层，在前端里就是我们常说的DOM层，主要作用是给用户展示各种信息；
(2)Model层：
数据层，数据可能是我们自定定义的数据，或者是从网络请求下来的数据；
(3)ViewModel层：
视图模型层，是View层和Model层沟通的桥梁；一方面它实现了数据绑定（Data Binding），将Model的改变实时反应到View中；另一方面它实现了DOM监听，当DOM发生改变可以对应改变数据（Data）
以上就是Vue入门第一天的全部内容了。
资料文档地址：前端开发Vue基础篇：Day01初识Vue.pdf
扫一扫
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
