vue2-vue基础入门（一）

vue简介

vue

1.构建用户界面

• 用vue往html页面中填充数据，非常方便

2.框架

• 是一套现成的解决方案，程序员只能遵守框架的规范去编写自己的业务功能。
• 要学习vue，就是在学习vue框架中规定的用法
• vue的指令、组件（对UI结构的复用）、路由、Vuex

vue的特性

1.数据驱动视图

• 数据的变化会驱动视图自动更新
• 好处：程序员只管把数据维护好，页面结构会被vue自动渲染出来。
• 数据驱动视图是单向的数据绑定。（页面结构的变化不会同步到数据中去）

2.双向数据绑定

• 在网页中，form表单负责采集数据，Ajax负责提交数据。
• js数据的变化，会被自动渲染到页面上。
• 页面上表单采集的数据发生变化，会被vue自动获取，并更新到js数据中心。

MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model（数据源）、View（视图）、ViewModel（vue的实例）。

他把每个HTML页面都拆成了三部分，如图：

ViewModel作为MVVM的核心，他把当前页面的数据源（Model）和页面的结构（View）连接到了一起。

vue的基本使用

基本使用步骤

1.导入vue.js的script脚本文件

2.在页面中声明一个将要被vue所控制的DOM区域

3.创建vm实例对象（vue实例对象）

//希望vue能够控制下面这个div，帮我们填充数据
<div id = "app">{{ username }}</div>

//1.导入vue的库文件，在window全局就有了Vue这个构造函数
<script src="./lib/vue-2.6.12.js"></script>
//2.创建Vue的实例对象
<script>
    //创建Vue的实例对象
    const vm = new Vue({
        //el属性是固定写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
        //如果传的是个标签名，那么vue只会控制第一个标签。
        el:'#app',
        //data对象就是要渲染到页面上的数据
        data:{
            username:'03'        
        }    
    })
</script>

【注】：实际开发的时候，一般在最外层加一个div标签，id=”app”，然后让vue控制这个最外层的div即可

基本代码和MVVM的对应关系

vue的调试工具

vue-devtools工具很好用，自己去网上搜下载步骤，别忘了配置才能使用。

下载完就可以如下图所示看到了：

vue的指令

指令的概念

指令是vue为开发者提供的模板语法，辅助开发者渲染页面的基本结构。（最基础）

内容渲染指令

辅助开发者渲染DOM元素的文本内容。

1）v-text指令

• 缺点：会覆盖元素内部原有的内容。

//覆盖“姓名”
<p v-text="username">姓名</p> 

2）语法

• 语法的专业名称是**插值表达式**（英文名是：Mustache）
• 专门用来解决v-text的内容覆盖问题，只是内容的占位符，不会覆盖原有内容。
• 注意：插值表达式只能用于元素的内容结点中，不能用于元素的属性节点中。

<p>姓名：{{username}}</p>

3）v-html指令

v-text和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则使用v-html指令。

//info里面包含了HTML标签
<p v-html="info">姓名</p> 

属性绑定指令

需要为元素的属性动态绑定属性值，则用到v-bind属性绑定指令。

<input type="text" v-bind:placeholder="tips">
//vue 规定 "v-bind:" 指令可以简写为 ":"
<input type="text" :placeholder="tips">

使用JavaScript表达式

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算。

{{ number+1 }}
{{ ok ? 'YES' : 'NO' }}
//在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号
<div :title=" 'box-' + index "></div>

事件绑定指令

1.事件绑定指令

vue提供了v-on事件绑定指令，来辅助程序员为DOM元素监听事件。

<div id = "app">
    <p>{{count}}</p>
    //如果没有参数的话，可以不加()
    <button v-on:click = "add">+1</button>
    <button v-on:click = "sub(2)">-2</button>
    //v-on: 指令可以被简写成 @
    <button @click = "sub(3)">-3</button>
    //vue提供了内置变量，叫做$event，他就是原生DOM的事件对象e
    //如果默默认的事件对象e被覆盖了，则可以手动传一个$event
    <button @click = "add(2,$event)">+2</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            count:0        
        },
        //定义事件的处理函数
        methods:{
            add:function() {
                //vm.count++;
                //this可以替代vm
                this.count++;
            },
            //以上代码可以简写成：
            sub(n) {
                this.count-=2;         
            },
            //按下按钮后自增2，并且按钮颜色变为红色
            red(n,e) {
                this.count+=2;
                e.target.style.backgroundColor = 'red';            
            }
        }    
    })
</script>

【注】：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为@click、@input、@keyup

2.事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，用来辅助程序员更方便的对事件的触发进行控制。

//阻止默认行为  阻止a链接跳转
<a @click.prevent="show">a链接</a>

//阻止事件冒泡（点击里面的标签，会先触发里面的click再触发外面的click）
//不阻止冒泡的话：点击button按钮，会先调用fun1()，再调用fun2()
<div @click="fun2">
    <button @click.stop = "fun1">按钮</button>
</div>

3.按键修饰符

在监听键盘事件时，我们需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。

<input type="text" @keyup.esc="clearInput" @click.enter="commitAjax">
methods:{
    //清空文本框操作
    clearInput(e) {
        e.target.value = '';
    }
    commitAjax() {
        console.log("enter键按下,commitAjax()方法被调用")    
    }
}

双向绑定指令

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。

//v-model是双向的数据绑定（此时可以不用在使用value属性了）
<input type="text" v-model="username">
//v-blind是单向的数据绑定（数据源的变化会同步到页面上，但是页面上的变化不会同步到数据源）
<input type="text" :value="username">

【注】：只有表单元素使用v-model才有意义。div如果使用了v-model，没有意义；因为div并不能够修改它里面的数据。

使用范围：

• textarea
• select
• input输入框
  • type=”xxx”
  • type=”checkbox”
  • type=”radio”

v-model指令的修饰符

为了方便对用户输入的内容进行处理。

条件渲染指令

辅助开发者按需控制DOM的显示与隐藏。

• v-if（常用）
  • 原理：每次动态创建或移除元素，来实现元素的显示和隐藏
  • 如果刚进入页面的时候，某些元素默认不需要被显示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能会更好。
  • 常与v-else-if（出现率低） 和 v-else （常用）配套使用 【v-else-if指令必须配合v-if一起使用，否则它将不会被识别！】
• v-show
  • 原理：动态为元素添加或移除 style=”display:none;” 样式，来实现元素的显示和隐藏。
  • 如果要频繁的切换元素的显示状态，用v-show性能更好

<p v-if="flag">这是被v-if控制的元素</p>
<p v-ishow="flag">这是被v-show控制的元素</p>

列表渲染指令

用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for指令需要使用 item in items 形式的特殊语法，其中：

• items是待循环的数组
• item是被循环的每一项

v-for中的索引：

• 语法格式：**(item,index) in items**

v-for中的key值：

• 官方建议，只要用到v-for，一定要绑定一个 :key 属性，而且尽量把id作为key的值（避免重复）。
• key的值只能是字符串或数字类型。
• key值不能重复，否则会中断报错。【Duplicate keys detected】
• 使用index的值当做key的值没有任何意义（index的值不具有唯一性）。

data:{
    //列表数据
    list:[
        {id:1,name:'小林'} ,
        {id:2,name:'03'}   
    ]
}
<ul v-for="(item,index) in list" :key="item.id">
    <li>{{index}}</li>   //从0开始
    <li>{{item.id}}</li>
    <li>{{item.name}}</li>
</ul>

过滤器（vue3无了）

过滤器的概念

过滤器（Filter）是vue为开发者提供的功能，常用于文本的格式化。【本质：函数】

过滤器注意点

• 由“管道符”进行调用。
• 在过滤器的形参中，就可以获取到“管道符”前面待处理的那个值。
• 必须被定义到filters节点之下，且一定要有返回值。
• 可以串联调用过滤器。

//前一个过滤器的返回值作为后一个过滤器的参数
{{ message | cap1 | cap2 }}  

适用场景

• 插值表达式
• v-bind属性绑定

//插值表达式：
//在双花括号中调用capitalize过滤器函数，对message的值进行格式化
//p标签里看到的是capitalize(message)函数的返回值
<p>{{ message | capitalize }}</p>
data:{
    message:'helloworld'
}
//过滤器函数必须被定义到filters节点之下
filters:{
    //val就是message的值
    capitalize(val) {
        //字符串有charAt方法，表示从字符串中把索引对应的字符获取出来
        const first = val.charAt(0).toUpperCase();
        //字符串的slice方法，可以截取字符串，从指定索引往后截取
        const other = val.slice(1);//从索引为1一直截取到最后
        return first+other;
    }
}

私有过滤器和全局过滤器

• 私有过滤器
  • 在filters里面定义的是全局过滤器。
  • 只能在当前vm实例所控制的el区域内使用。
  • 不会和别的vm实例共享过滤器。
• 全局过滤器（常用）
  • 独立于每个vm实例之外
  • 第2个参数：全局过滤器的“处理函数”
  • 第1个参数：全局过滤器的“名字”

【注】：全局过滤器和私有过滤器重名，此时调用的是私有过滤器。

Vue.filter('capitalize',(str)=>{
    return str.charAt(0).toUpperCase() + str.slice(1);
})

【注】：编码规范：先指令，再属性，最后绑定事件