vue基础知识和案例
前言:在写vue时建议设置一套属于vue开发的模板,如何设置请查看我的上一篇文章,希望对大家有帮助
模板建议如下:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 <body> 11 <div id="box"> 12 <!--书写 vuejs 代码--> 13 14 15 </div> 16 17 </body> 18 19 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 20 21 <script> 22 23 var vm = new Vue({ 24 el: '#box', 25 data: { 26 title: 'hi vuejs!', 27 28 } 29 }); 30 31 32 33 </script> 34 </html>
首先让我们来看一下如何使用vue框架
1:vue开始开车上路的代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 <body> 11 <!--2. 定义一个 vuejs 管理的区域:在它管理的区域,可以使用vuejs特性,可以使用插值表达式,把vuejs管理的数据放在页面--> 12 <!--V (view 视图)--> 13 <div id="box"> 14 <!-- 3. vuejs 语法--> 15 <!--1.插值表达式 2. 小胡子语法 Mustache --> 16 <!-- 听 说 读 写 译--> 17 <!-- day day up 、good good study--> 18 19 {{ title }} 20 </div> 21 22 </body> 23 <!--1. 引入--> 24 <script src="./lib/vuejs/vue.js"></script> 25 <!--全局内暴露 Vue 构造函数--> 26 <script> 27 // 3. 实例化 28 // console.log(Vue); 29 30 // 传递一个参数:对象,对象存在两个属性:1. el 选择器,代表 vuejs 管理的区域 2. data 代表是vuejs可以操作的数据 31 //vm 实例对象叫做 C controller,但是在 vuejs 里面更乐于叫做 VM(ViewModel 起的是有个视图和模型的连接作用。如果模型里面有数据,可以通过vuejs放置在页面,如果视图上面数据发生变化,可以使用 vuejs进行收集,赋值到模型上面,我们把这种特性叫做双向数据绑定。) 32 // 方向一: 模型到视图变化 33 // 方向二: 视图到模型的变化 34 var vm = new Vue({ 35 el: '#box', 36 // 叫做 M(model 模型) 37 data: { 38 title: 'hi vuejs!', 39 } 40 }); 41 console.log(vm); 42 // document.getElementById('container').innerHTML = 'hi vuejs!'; 43 44 </script> 45 </html>
1:导入vue框架的包
2:对Vue进行
2:用v-for进行数组的遍历
遍历数组大家可能能到的是通过下标获取元素吧,但是这样子的效率是很低的,用v-for就会事半功倍的效果啦
,代码案例如下
1 <p>用v-for进行数组的遍历</p> 2 <div v-for="v in arr">{{ v }}</div>
![](https://img2018.cnblogs.com/blog/1568864/201910/1568864-20191023174409295-261008868.png)