vue 回车查询按钮_从零开始学习vue

在github搜小程序我们可以看到许多用许多用vue开发的实例。

到底什么是vue，我们不妨浪费一天时间来了解一下。

一、什么是vue

Vue是一个JavaScript框架。作者是国内常年混迹知乎的一个前端大神。

它的特点是响应式的双向数据绑定，和小程序很相似。

vue官网地址：https://cn.vuejs.org/

二、学习vue需要掌握什么基础

1、掌握HTML/CSS/JavaScript/AJAX基础知识

2、掌握VSCode基本操作，如果对这个工具不了解可以看我上一篇文章

三、vue入门

1、安装vue非常简单，只需要新建一个html，通过如下方式引入vue：

2、vue一个完整的入门案例

            Vue基础

{{ message }}

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

运行结果。可以看到div里展示的是js里面的data的值

四、el挂载点

js里有一句话：el: '.app'。意思是html里id="app"的标签里的数据都受vue管理，可以使用{{xxx}}的方式去获取data里的值。

el注意事项：

el元素命中的外部，不被vue管理
el元素命中的内部也被vue管理，可以被其他元素嵌套
el可以用其他选择器，但是主要推荐用id选择器
el支持大部分双标签(不支持html和body标签)，不支持单标签

            Vue基础    {{ message }}

{{ message }} {{ message }}

var app = new Vue({ //el: '#app', el: '.app', data: { message: 'Hello Vue!' } })

五、data数据对象

data里的数据可以是字符串、对象、数据。

获取具体值的方式和小程序一样。

下面是data数据对象案例：

{{ list[0] }} {{ school }}

`{{ school.mobile }}`

var app = new Vue({ //el: '#app', el: '.app', data: { message: 'Hello Vue!', list:['a','b','c'], school:{ "name":"大地幼儿园", "mobile":"123456" } } })

六、vue常用指令

1、v-text

v-text的作用是设置标签的内容
默认的写法会替换全部内容
如果要部分替换，使用{{}}

`快乐`

`{{ message }}快乐`

var app = new Vue({ //el: '#app', el: '#app', data: { message: "你好中国!!!", info: "前端" } })

页面展示：

2、v-html

v-html的作用是设置语速的innerHTML
内容中有html结构会被解析成为标签
v-text指令无论什么内容，只会被解析为文本

                        var app = new Vue({            //el: '#app',            el: '#app',            data: {                // content:"你好"                content:"你好"            }        })

页面展示：

3、v-on为元素绑定事件

v-on的作用：为元素绑定事件
事件名不需要写on
指令可以简写成@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

`{{food}}`

var app = new Vue({ el: '#app', data:{ food:"番茄" }, methods:{ doIt:function(){ alert("hello") }, changefood:function(){ // console.log(this.food) this.food += "炒蛋" } } })

页面展示：

4、v-show

v-show的作用：根据表达式的真假切换元素的显示状态
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

切换

var app = new Vue({ el: '#app', data: { isShow: false, age:19 }, methods:{ change:function(){ this.isShow = !this.isShow; } } })

页面展示：

5、v-if

v-if作用是根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
频繁切换用v-show，反之用v-if，因为前者的切换消耗小

切换

路飞

`热死啦`

var app = new Vue({ el: '#app', data: { isShow: false, temp: 20 }, methods:{ change:function(){ this.isShow = !this.isShow; } } })

页面展示：

6、v-bind

v-bind的作用是为元素绑定属性
完整写法是v-bind:属性名
简写的话可以省略v-bind，直接写:属性名
需要动态的增删class建议使用对象的方式

            Vue基础            .active{            border: 1px solid red;        }

var app = new Vue({ el: '#app', data: { imgSrc: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1132362758,4197603989&fm=26&gp=0.jpg", imgTitle: "Test", isActive:false }, methods:{ changeActive:function(){ this.isActive = !this.isActive; } } })

7、v-for

v-for的作用是根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

{{ index+1 }}、城市:{{ item }} {{ ind }} {{ it.name }}

var app = new Vue({ el: '#app', data: { arr:['北京','上海','广州','深圳'], vagetables:[{name:'番茄'},{name:'鸡蛋'}] }, methods:{ add:function(){ this.vagetables.push({name:'添加'}) }, remove:function(){ this.vagetables.shift(); } } })

8、v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
时间的后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多钟

                        var app = new Vue({            el: '#app',            methods:{                doIt:function(p1,p2){                    console.log(p1);                    console.log(p2)                },                sayHi:function(){                    alert("吃了没")                }            }        })

9、v-model 获取和设置表单元素的值(双向数据绑定)

v-model的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的元素表单元素的值

`{{ message }}`

var app = new Vue({ el: '#app', data: { message:"王路飞" }, methods:{ getM:function(){ alert(this.message) }, setM:function(){ this.message = "李索隆" } } })

七、小案例

1、案例——计数器

功能：有左右两个按钮，点击调整数字大小，超过数字最大最小值报错

案例代码：

- {{ num }} +

var app = new Vue({ el: '#app', data:{ num:1 }, methods:{ sub:function(){ if(this.num>0){ this.num -- }else{ alert("0是最小值") } }, add:function(){ if(this.num<10){ this.num ++ }else{ alert("10是最大值") } } } })body>

案例展示：

2、案例——记事本

功能：输入框记录后点回车保存记录，点击删除按钮删除记录，点击清空按钮清空记录。

案例代码：

<body>    <section id="todoapp">                <header class="header">            <h1>记事本h1>            <input type="text" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" v-model="inputValue" @keyup.enter="add">        header>                <section class="main">            <ul>                <li v-for="(item,index) in list">                    <span> {{ index+1 }} span>                    <label>{{ item }}label>                    <button @click="del(index)">删除button>                li>            ul>        section>                <footer class="footer">            <span v-if="list.length!=0"> <strong> {{ list.length}} strong> items leftspan>            <br>            <button @click="clear" v-if="list.length!=0"> 清空button>        footer>    section>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        var app = new Vue({          el:"#todoapp",          data:{              list:[],              inputValue:""          },          methods:{              add:function(){                  this.list.push(this.inputValue);                  this.inputValue=""              },              del:function(index){                 //从第index位删除0个，新增一个hello                //  this.list.splice(index,0,'hello')                //从第index位开始删除1个，添加0个                this.list.splice(index,1);              },              clear:function(){                this.list=[];              }          }        })script>body>

案例展示：

以上教程都是基于vue2.0版本来编写。

上周作者发布了vue3.0版本——One Piece，官网地址：

https://github.com/vuejs/vue-next/releases/tag/v3.0.0

在大航海时代，你更愿意当路飞还是克比呢？