Vue——基础语法篇

author：木子六日

学习视频来源

coderwhy老师的vue教学

文章目录

Vue——基础语法篇
- author：木子六日
- 学习视频来源
- - 01.hello vue
  - 02.vue展示列表
  - 03.vue计数器案例
  - 04.v-once的使用
  - 05.v-html的使用
  - 06.v-text的使用
  - 07.v-pre的使用
  - 08.v-bind的使用
  - 09.小练习
  - 10.computed计算属性
  - 11.v-on的修饰符
  - 12.v-if的使用
  - 13.filter、map和reduce三大函数介绍
  - 14.v-model的使用

01.hello vue

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hello vue!</title><script src="js/vue.js"></script></head><body><div id="div01"><h2>{{message}}</h2></div><div>{{message}}</div></body><script type="text/javascript">//let定义变量 const定义常量,尽量不要用var定义//另外要注意这个script要写在div后面嗷,不然就找不到了let app = new Vue({el:'#div01',//el这个东西代表了vue要管理的标签data:{     //这里面定义数据message:'有一说一vue这么写一点也不别扭，我已经爱上vue了'}})</script>
</html>

02.vue展示列表

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div01"><h1>这写起来也太爽了吧。。。</h1><ul><li v-for="item in movies">{{item}}</li></ul></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#div01',data:{movies:['阳关灿烂的日子','鬼子来了','太阳照常升起','让子弹飞','一步之遥','邪不压正']}})</script></body>
</html>

03.vue计数器案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><h2>当前计数:{{count}}</h2><!-- 可以看到这种写法很方便，但是当逻辑比较复杂时就要写一个函数了 --><!-- <button type="button" v-on:click="count++">+</button><button type="button" v-on:click="count--">-</button> --><button type="button" v-on:click="count++">+</button><!-- <button type="button" v-on:click="count--">-</button> --><!-- v-on:click 还可以简写成@click --><button type="button" @click="count--">- </button> </div> <script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({//el定义控制的标签el: '#app',//data定义数据data: {count: 0},//methods定义方法,有一说一,比js和jQuery写起来舒服多了methods: {add: function() {this.count++;},minus: function() {this.count--;}}})</script></body></html>

04.v-once的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>v-once的使用</title></head><body><div id="app"><h2>{{message}}</h2><!-- 加入v-once之后{{}}中的数据只会加载一次，不再动态改变 --><h2 v-once>{{message}}</h2></div><script src="vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{message:'nihao'}})</script></body>
</html>

05.v-html的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>v-html的使用</title></head><body><div id="app"><!-- v-html 将内容解析为html进行展示--><h2 v-html="url"></h2></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{url:"<a href='https://www.baidu.com'>百度一下</a>"}})</script></body>
</html>

06.v-text的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>v-text的使用</title></head><body><div id="app"><!-- v-text 用于展示文本，和{{}}效果一样，一般不使用--><h2 v-text="message"></h2><h2>{{message}}</h2></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{message:"丢雷楼某嗨"}})</script></body>
</html>

07.v-pre的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>v-pre的使用</title></head><body><div id="app"><!-- v-pre相当于转译字符，将内容原样输出，类似python中字符串前加r--><h2 v-pre>{{message}}</h2><h2>{{message}}</h2></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{message:"丢雷楼某嗨"}})</script></body>
</html>

08.v-bind的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>v-bind的使用</title><style type="text/css">.Red{color: red;}.Blue{color: blue;}</style></head><body><!-- v-bind用于操作元素样式之前的{{}}那些都是操作元素内容，相当于之前js的innerHTML现在这个v-bind是操作元素样式，相当于之前js的.style.什么什么--><div id="app" style="text-align: center;"><img v-bind:src="url1" width="400px" height="500px"><!-- v-bind的由于使用频繁，vue提供了简写的形式，直接写冒号就行了 --><img :src="url2" width="400px" height="500px"><hr ><!-- v-bind操作class属性如下 --><h1 v-bind:class="{Red:isRed,Blue:isBlue}">点击按钮改变颜色</h1><button @click="changeClass">color change</button><hr ><!-- v-bind操作style属性如下 --><!-- 属性名尽量使用驼峰，因为-会被解析成减号，属性值可以在data中定义，若想直接写，需要加引号转义 --><h5 :style="{fontSize:tempSize+'px'}" @click="changeSize">点击字体变大</h5></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:"#app",data:{url1:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589563082654&di=abe029e125e1a7a4bc6982398a1b6270&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20161215%2F20161215154634_940b4d487aedf8f5c0931f7f3591781b_1.jpeg",url2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589563500622&di=65e0fd8719641dac01b8b3e76f209da3&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20170511%2F20170511132714_a97930c96c5a47884752b81f8a5da89f_6.jpeg",isRed:true,isBlue:false,tempSize:50},methods:{changeClass:function(){this.isRed = !this.isRed;this.isBlue = !this.isBlue;},changeSize:function(){this.tempSize++;}}})</script></body>
</html>

09.小练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小练习</title><style type="text/css">.Color{color: aquamarine;}</style></head><!-- 注意用索引值的方式对数组元素进行修改  不是响应式的  即页面不会发生改动（即使数组发生了变化）而其他对数组的改动全是响应式的如果真的要修改数组元素，可以使用slice方法，这个方法既可以插入又可以删除又可以修改删除：arr.slice(起始位置索引，删除几个)插入：arr.slice(起始位置索引，0，插入的元素)修改(相当于先删除后插入)：arr.slice(起始位置索引，删除个数，...插入的元素)--><body><div id="app"><ul><li v-for="(item, index) in movies":class="{Color:index === currentIdx}"@click="changeColor(index)">{{item}}</li></ul></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{movies:['阳光灿烂的日子','鬼子来了','太阳照常升起','让子弹飞','一步之遥','邪不压正'],currentIdx:0},methods:{changeColor:function(index){this.currentIdx = index;}}})</script></body>
</html>

10.computed计算属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>computed计算属性的使用</title></head><body><div id="app"><h2>{{str3}}</h2>//两种写法等价<h2>{{str4()}}</h2><br><h2>书的总价是：{{totalPrice}}</h2></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{str1:"木子",str2:"六日",books:[{id:1,name:'数据结构与算法',price:40},{id:2,name:'计算机组成原理',price:29},{id:3,name:'操作系统',price:46},{id:4,name:'计算机网络',price:50},]},// computed用于计算属性,其实跟methods一样,只不过可以直接当成data中的变量来用//而且数据不改变的话只会加载一次computed:{str3:function(){return this.str1 + ' ' + this.str2;},totalPrice(){let res = 0;for(let i = 0;i<this.books.length;i++){res += this.books[i].price;}return res;}},// 等价于methodsmethods:{str4(){return this.str1 + ' ' + this.str2;}}})</script></body>
</html>

11.v-on的修饰符

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>v-on的修饰符</title></head><body><!-- 正常情况下点击按钮的时候div也会响应点击函数divClick为了使得div的点击函数不被响应，即防止btn冒泡，可以加入.stop修饰符修饰--><div id="app" @click="divClick"><button type="button" @click="btnClick">按钮1</button><button type="button" @click.stop="btnClick">按钮2</button><br><br><form action="baidu" method="post"><!-- submit按钮默认有提交的功能，如果我们想阻止这一功能，就可以用.prevent修饰符修饰 --><input type="submit" value="提交" @click.prevent.stop="submitClick"/></form><br><!-- 监听具体某一按键的抬起，可以使用.键名的修饰符，比如监听回车键的修饰符就是.enter --><input type="text" @keyup.enter="keyup" /><br><br><!-- .once修饰符：使得只有第一次有效果，后面就都没效果了，不常用 --><button type="button" @click.once="btnClick">只能被点击一次的按钮</button></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{},methods:{btnClick(){console.log('btnClick');},divClick(){console.log('divClick');},submitClick(){console.log('submitClick');},keyup(){console.log('按了一次回车键')}}})</script></body>
</html>

12.v-if的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>v-if的使用</title></head><body><div id="app"><!-- 尽量少用，判断条件复杂的话尽量使用计算属性或者方法 --><h2 v-if="score>=90">优秀</h2><h2 v-else-if="score>=80">良好</h2><h2 v-else-if="score>=60">及格</h2><h2 v-else>不及格</h2><!-- 这里带一下另一个知识点v-show,用法与v-if一样,不同的是当false的时候,v-show仍会出现在dom中,但是所在标签会有样式display:none --><br><h2 v-show="score<0">{{score}}</h2></div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{score:92}})</script></body>
</html>

13.filter、map和reduce三大函数介绍

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>三大函数</title></head><body><script type="text/javascript">let arr = [1,23,45435,654,1234,1234,6,56]//filter函数,我们来筛选arr数组中小于100的数放到一个新的数组里面let newArr1 = arr.filter(function(n){return n<100;})//filter函数的参数是一个回调函数,n代表arr中的每一个元素,回调函数的返回值是布尔型,为true则加入新数组//为false则不加入,filter函数的返回值是一个新数组.console.log(newArr1)//map函数,我们来把newArr1中的每一个元素乘以2放到一个新的数组里面let newArr2 = newArr1.map(function(n){return n * 2;})//map函数的参数也是一个回调函数,返回值也是一个新的数组.//回调函数的返回值即为要在新数组中添加的元素console.log(newArr2);//reduce函数,我们来统计newArr2数组中元素的和let sum = newArr2.reduce(function(preValue,n){return preValue + n;},0)//reduce函数有两个参数,第一个参数是一个回调函数,第二个参数是preValue的初始值//回调函数的第一个参数是preValue,第二个参数是数组中的每一个元素//reduce函数的返回值是preValue的最终值console.log(sum);//如果把上面三个函数连起来写的话就是let total = arr.filter(function(n){return n<100}).map(function(n){return n*2}).reduce(function(preValue,n){return preValue+n;},0)console.log(total)//以下是极度装B写法let total2 = arr.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre+n)console.log(total2)</script></body>
</html>

14.v-model的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- v-model一般用于绑定表单标签，就是input哪些 --><!-- v-model可实现双向绑定，即输入框中值的实时修改也会改变data中的值 --><div id="app"><input type="text" v-model="message" />{{message}}<hr ><!-- v-model绑定radio单选框 --><input type="radio" value="male" v-model="sex"/>男<input type="radio" value="female" v-model="sex"/>女你所选择的性别是：{{sex}}<hr ><!-- v-model绑定CheckBox复选框 --><input type="checkbox" v-model="agree"/>是否同意<button type="button" :disabled="!agree">下一步</button><hr ><input type="checkbox" value="basketball" v-model="hobbies" />打篮球<input type="checkbox" value="reading" v-model="hobbies" />看书<input type="checkbox" value="movie" v-model="hobbies" />看电影你的爱好是：{{hobbies}}<hr ><!-- v-model绑定下拉框select --><select name="country" v-model="country"><option value ="中国">中国</option><option value ="美国">美国</option><option value ="俄罗斯">俄罗斯</option><option value ="英国">英国</option><option value ="法国">法国</option></select>你选择的国家是：{{country}}</div><script src="js/vue.js"></script><script type="text/javascript">const app = new Vue({el:'#app',data:{message:'',sex:'male',agree:false,hobbies:[],country:"中国"}})</script></body>
</html>

Vue——基础语法篇相关推荐

Vue.js学习笔记 01、Vue基本语法篇
文章目录前言 1.基础学习 1.1.第一个vue:helloworld(template以及mount()使用) 1.2.编写计数器(mounted应用) 1.3.vue的绑定事件和事件方法(v-o ...
Xamarin XAML语言教程基础语法篇大学霸
Xamarin XAML语言教程基础语法篇大学霸前言 Xamarin是一个跨平台开发框架.它可以用来开发iOS.Android.Windows Phone和Mac的应用程序.使用Xamarin框 ...
FPGA笔记之verilog语言（基础语法篇）
文章目录 FPGA笔记之verilog语言(基础语法篇) 1. verilog 的基础结构 1.1 verilog设计的基本单元--module 1.2 module的使用 1.3 I/O的说明 1. ...
Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）
文章目录 1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for) 1.1 v-bind 1.1.1 代码示例 1.1.2 运行结果 1.1.3 小结 1. ...
Markdown 快速入门上（基础语法篇）
Markdown 快速入门上(基础语法篇) 1. 简介 Markdown 是一门轻量级的标记性语言,可以用来修饰纯文本使得文档具有一定的优美格式. 像Microsoft Word 文本编辑器, 你需要 ...
一起学Go吧! Go语言基础语法篇二
文章目录前言 Go 语言指针 Go语言结构体 Go语言切片(Slice) Go 语言范围(Range) Go 语言Map(集合) Go 语言类型转换 Go 语言接口 Go 错误处理 Go并发通道( ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：组件详解+项目说明...
缘起新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

Vue——基础语法篇

Vue——基础语法篇

author：木子六日

学习视频来源

文章目录

01.hello vue

02.vue展示列表

03.vue计数器案例

04.v-once的使用

05.v-html的使用

06.v-text的使用

07.v-pre的使用

08.v-bind的使用

09.小练习

10.computed计算属性

11.v-on的修饰符

12.v-if的使用

13.filter、map和reduce三大函数介绍

14.v-model的使用

Vue——基础语法篇相关推荐

最新文章

热门文章