初识vue
- M：Model（模型） 对应data的数据
- V：View（视图） 模板==>页面
- VM：ViewModel（视图模型） Vue实例对象
搭建vue环境
vue环境的搭建有很多种：
- 使用cdn
- 下载javaScript文件，自行托管
- 使用npm安装
- 使用官方的cli来构建项目
对于我们初次学习，我们使用自行下载js的方式。
第一个hello world
<body> <div id="app"> {{message}} </div> </body> <script src="./js/vue2.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data: { // 用于储存数据，数据供el指定的容器使用 message: 'Hello world!', }, }); </script>
注意
- 一个vue实例只能接管一个容器
- 插值语法：{{}} 可以读取到在data的所有属性
- data中数据发生变化，那么在容器用到的数据会自动更新
- data的写法，我们通常会写成函数的方式，代码如下：
data(){ return { message: 'Hello world!', } }
Data为啥要写成函数？
Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。
基础知识
指令
什么是指令？ 在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。
比如在HTML页面中这样使用
<div v-xxx=''></div>
在vue中v-xxx就是vue的指令，指令就是以数据去驱动DOM行为的,简化DOM操作。
常用的指令有哪些，及怎么使用这些指令
- v-text 不可解析html标签
- v-html 可解析html标签
- v-if 做元素的插入（append）和移除（remove）操作
- v-else-if
- v-else
- v-show display:none 和display：block的切换
- v-for 数组 item，index 对象 value，key ，index
<body> <div id="app"> <div v-text='mytext'></div> <hr> <div v-html='myhtml'></div> <hr> <button v-if="isButtonIf">v-if 元素插入和移除</button> <hr> <button v-if="num==1">测试v-if</button> <button v-else-if="num==2">测试v-else-if</button> <button v-else>测试v-else</button> <hr /> <button v-show="isButtonShow">v-show 元素的显示和隐藏</button> <hr /> v-for 循环数组。这个指令写道哪个标签就循环哪个标签，可以显示数组内容和下标 <ul> <li v-for="(love,index) in lovesArray"> {{index}}-{{love}} </li> </ul> v-for 循环对象。可以显示对象的key和value <ul> <li v-for="(attr,key) in myUser"> {{key}}:{{attr}} </li> </ul> v-for 循环对象数组。可以显示对象的成员value <ul> <li v-for="(u,index) in userArray"> {{index}}:{{u.username}} </li> </ul> v-for 循环数字 <ul> <li v-for="num in 10"> {{num}} </li> </ul> </div> </body> <script src="./js/vue2.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data() { return { mytext: '<h1>我是v-text</h1>', myhtml: '<h1>我是v-html</h1>', isButtonIf: true, num: 2, isButtonShow: false, lovesArray: ['吃', '睡', '玩'], myUser: { username: 'youyou', age: 18 }, userArray: [{ username: 'youyou', age: 18 }, { username: 'feifei', age: 30 } ] } } }); </script>
双向数据绑定
vue双向数据流 v-model，只作用于有value属性的元素
<!-- 双向数据绑定是表单元素进行绑定 --> <input type="text" v-model="person.name">
- 内存 《》页面
- 双向数据绑定 页面对于input的value改变，能影响内存中name变量
- 内存js改变name的值，会影响页面重新渲染最新值
事件绑定
事件绑定v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名"
在事件对应的方法中获取到事件对象
- 不加括号
<button @click="fun1" >点击获取事件对象</button>
fun1(event){ console.log(event.target); }
- 加括号，加括号一般是需要有额外参数的情况。
<button @click="fun2($event,'其他参数')" >点击获取事件对象(带括号)</button>
fun2(evnet, arg){ console.log(event.target,arg); }
事件修饰符-阻止冒泡
冒泡发生的情景：子元素和父元素绑定了相同的事件，然后点击了子元素，父元素也触发了该事件
- 使用原生js阻止冒泡
<div @click="fun3"> 外层div <div @click="fun3">里层div</div> </div>
fun3(event){ console.log(event.target); event.stopPropagation(); // 使用原生js阻止冒泡 },
- 使用vue事件的修饰符阻止冒泡
<div @click="fun4"> 外层div <div @click.stop="fun4">里层div</div> </div>
fun4(event){ console.log(event.target); }
