VUE的学习_从入门到放弃(一)
一、vue的功能及作用
- 工作方式如下
1.不用操作DOM
2.单页面应用web项目 简称:SPA
3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法,微信小程序/MpVue......
4.掌握Vue的开发语法,相当于掌握了新的开发模式,可以适应目前绝大多数的技术环境
- Vue特点
1.数据驱动视图,可以让我们只关注数据
2.MVVM双向绑定
3.通过指令增强了html功能
4.组件化,复用代码
5.开发者一般只关注数据
- Vue的安装及使用
1.直接通过路径引入,地址:https://vuejs.org/js/vue.min.js
2.直接下载在本地引入
3.采用npm安装的方式,命令:npm install vue
提示:注意Vue.js不支持IE8及其以下版本
示例demo:
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app"> {{msg}} </div> <script> var vm = new Vue({ //el可以使用id选择器、calss选择器、dom对象 //el不能尝试使用html以及body el:document.getElementById("app"), data: { msg:"Hello world!" }, }); </script>
在插值表达式中使用js表达式、三元运算符、方法调用 -->
<p>{{string}}</p> <p>{{count == 100}}</p> <p>{{count < 100}}</p> <p>{{count+10}}</p> <p>{{string.split("|")}}</p> <p>{{count < 100?"小于":“大于}}</p>
指令--凡是以v-开头的都叫vue指令
- v-text和v-html 与 innerText和innerHTML相比较
- 插值表达式 1.是插入时的数据渲染 2.尚未渲染完成时会出现丑丑的大括号
- v-text、v-html是整体式的数据替换 2.尚未渲染完成时不会出现东西(渲染标签中事先有内容除外)
- 注意,非必要时尽量不要使用或者禁止使用v-html,因为会有xss跨站脚本攻击
<div id="app"> <p v-text ="string"> 1236</p> <p v-html ="string">46413</p> </div>
- v-if 更大的开销 适用于不平凡切换显示状态,并且初始渲染时不必渲染,多重判断时适合使用
- v-show 开销较小 适用于平凡切换显示状态
<p v-if ="isShow"> {{string}}</p> <p v-show ="isShow">{{46413}}</p>
- v-on :click 简写(@click)
- @click.once只触发一次
- click.prevent 阻止默认事件
- click.stop 阻止冒泡事件
<button v-on:click="clickMe('Ultraman')">点击我</button> <!-- click.once 只会触发一次 --> <button @click.once="clickOnce">只触发一次</button> <!-- click.prevent 阻止默认事件 --> <a href="http://www.baidu.com" @click.prevent="stopjump">百度</a> <div @click="alert(1)"> <!-- click.stop 阻止冒泡事件 --> <div> <div @click.stop="alert(3)"> 我是div </div> </div> </div>
- input标签 change v-bind模拟v-model的底层
<input type="text" @change="change">
<input type="text" v-bind:value="string" @input="inputChange($event)">
change(){ alert("数据改变了"); }, inputChange(e){ console.log("变了"); this.string = e.target.value; }
- v-for 迭代;循环
<ul> <!-- array是需要渲染的对象 而item是每次接受迭代对象的别名 --> <li v-for="item in array">{{item}}</li> <!-- 始终记住,第一个参数是获取每次迭代的数据,第二个参数看实际情况,如果是迭代数组,则为数组的索引 --> <li v-for="item in objectArray">{{item.id}}----{{item.name}}</li> <!-- 如果是迭代对象,则顺序不同,第一个参数是属性的value,第二个参数为属性的key,第三个参数才是索引 --> <li v-for="obj in object">{{boj}}</li> <li v-for="(v,k,i) in object">{{k}}--{{v}}--{{i}}</li> <!-- for循环 --> <li v-for="num in 10">{{num}}--指定数据</li> </ul>
- v-bind 其作用是绑定标签上的所有属性
- 当标签上的属性变量或者动态的亦或需要改变的
- 简写“:”
<p v-bind:id="'ptest'"></p> <p :id="idName"></p> <p :class="showStyle?'p-style1':''">pppppp</p> <p :class="'p-style1':showStyle">pppppp</p> <p :class="'[bolder',showStyle?'p-style1':'p-style2']">pppppp</p> <p :class="'[bolder',{'p-style1':'p-style2'}]">pppppp</p> <p :style="color:'red'">ppppppp</p> <button @click="changeColor">变色</button> CSS <style> .p-style1{ background-color: aquamarine; color:red; } .p-style2{ background-color: aquamarine; color:red; } </style>
- v-model、v-cloakd和v-once的作用
<div id="app" v-cloak> {{msg}} {{range}} <br> <!-- v-model 可以处理input、textArea、select、radio、checkbox、botton --> <!-- c-cloak cue中自带的指令,作用是当加载完成后移除指令的属性 即,我们希望任何没有在加载完成前呈现的样式都可通过v-cloak呈现-->
<!-- v-once 使用该指令,页面视图只渲染一次 --> <!-- <input type="text" :value="msg" @input="changeInput($event)"> --> <input type="text" v-model="msg"> <input type="text" v-model="range"> <input type="range" v-model="range"> </div> <script> setTimeout(function(){ var vm = new Vue({ el:"#app", data: { msg:"Hello", range:100 }, methods: { changeInput(e){ this.msg = e.target.value; } }, });},5000)
至此,Vue的第一节就结束啦,如果你觉得有用,点个赞吧!
如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐];
如果您想转载本博客,请注明出处;
如果您对本文有意见或者建议,欢迎留言;
感谢您的阅读,请关注我的后续博客。