vue autocomplete_从零开始学习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

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