Vue入门知识
程序员文章站
2022-06-06 23:19:39
...
vue介绍
前端三大框架：
| 框架 | 介绍 |
|---|---|
| Vue | 尤雨溪，声明式的JavaScript框架 |
| React | Facebook公司，里面高阶函数比较多，对初学者不友好 es6语法需要很熟练 |
| Angular | 谷歌公司，目前更新到7.0，需要学习一下typescript |
Vue的基本引入和创建
-
下载
cdn方式下载 <script src="https://cdn.jsdeivr.net/nmp/vue/dist/vue.js"></script> -
引包
<script src="./vue.js"></script> -
实例化
//实例化对象 new Vue({ el: "#app", data: { //数据属性 msg: "小麦", person: { name: 'hu.wang', age: 18, sex: '男' }, msg2: 'hello vue' }, })Vue的模版语法 可以插入你想要的任何内容，除了if if-else用三元运算符代替
<!--模版语法--> <h2>{{msg}}</h2> <h2>{{person.name}}---{{person.age}}---{{person.sex}}</h2> <!--运算--> <h2>{{1==2}}</h2> <!--字典--> <h2>{{ {'name':'王虎'} }}</h2> <!--三元运算--> <h2>{{ 1>2? '真':'假' }}</h2> <!--字符串反转--> <h2>{{msg.split('').reverse().join('')}}</h2>Vue的指令系统
v-text: <!--指令系统,命令去做dom操作--> <body> <div id='app'> <div v-text="msg"></div> </div> <script src='vue.js'></script> <script> new Vue({ el: '#app', //牵扯到vue组件来说的时候,data一定是函数,而且必须要return一个对象,对象里面去弄数据 data() { return { msg: "<h2>小麦</h2>" } } }) </script> </body> 结果: <h2>小麦 </h2> v-html: <!--指令系统,命令去做dom操作--> <body> <div id='app'> {{msg}} <div v-html="msg"></div> </div> <script src='vue.js'></script> <script> new Vue({ el: '#app', //牵扯到vue组件来说的时候,data一定是函数,而且必须要return一个对象,对象里面去弄数据 data() { return { msg: "<h2>小麦</h2>" } } }) </script> </body> 结果: 小麦 v-on(绑定事件): <body> <div id='app'> {{add(2,3)}} <div v-text="msg"></div> <div v-html="msg"></div> <button @click="handleClick">隐藏</button> <div class="box" v-show="isShow"></div> </div> <script src='vue.js'></script> <script> //数据驱动视图 new Vue({ el: '#app', //牵扯到vue组件来说的时候,data一定是函数,而且必须要return一个对象,对象里面去弄数据 data() { return { msg: "<h2>哈哈哈</h2>", isShow: true } }, //methods函数 methods: { //methods里面也是对象,当前绑定的元素里面可以有多个方法 //声明一个函数 add(x, y) { return x + y }, //驱动 handleClick() { console.log(this); this.isShow = !this.isShow }, } }) </script> </body> v-on简便写法: @ <button @click='handerClick'>{{msgs}}</button> v-if: <div class="box" v-if="isShow"></div> //数据驱动视图 new Vue({ el: "#app", //data是一个函数 data() { return { isShow: true, //isShow: 1==2, //isShow: false, //isShow: 1 == 1, } }, methods: { } }) v-show(style.display): <div class="box" v-show="isShow"></div> //数据驱动视图 new Vue({ el: "#app", //data是一个函数 data() { return { isShow: true, isShow: 1==2, isShow: false, isShow: 1 == 1, } }, methods: { } }) v-else: <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> v-else-if: <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> v-bind: <div id="app"> <!--v-bind绑定标签中所有属性，image标签的src alt, a标签中的href title--> <img v-bind:src="imaSrc" v-bind:alt="msg"> </div> <script src="vue.js"></script> <script> new Vue({ el: "#app", data() { return { imaSrc: '1.jpg', msg: '海贼王' } } }) </script> v-bind简便写法: : <img :src="imaSrc" :alt="msg"> v-for: <div id="app"> <ul v-if="data.status == 'ok'"> <!--v-for优先级最高--> <li v-for="(item,index) in data.users" :key="item.id"> <h4>{{item.id}} -- {{item.name}} -- {{item.age}}</h4> </li> </ul> <div v-for="(value,key) in preson"> <h4>{{key}}--{{value}}</h4> </div> </div> <script src="vue.js"></script> <script> new Vue({ el: "#app", data() { return { data: { status: 'ok', users: [ { id: 1, name: 'li', age: '18' }, { id: 2, name: 'zhang', age: '19' }, { id: 3, name: 'wang', age: '20' } ] }, preson: { name: 'sun' } } }, methods: { } }) </script>v-if和v-show的区别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。v-else和v-else-if
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。v-bind和v-on
v-bind可以绑定标签中的任何属性 「image标签的src alt, a标签中的href title」 v-on可以监听js中的所有事件 「mouseenter,mouseleave」v-for
基于一个数组来渲染一个列表,需要使用 item in name 形式的特殊语法，其中 items 是源数据数组，而 name 则是被迭代的数组元素的别名。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性