​
目录

Vue简介

简单上手

模板语法 

数据绑定

el与data的两种写法

Vue中的数据代理

事件处理

计算属性

监视属性

绑定样式

Vue简介
        Vue是现代前端开发中非常受欢迎的框架之一，它的以下特点让他不仅在开发体验、更在性能方面表现优异。

渐进式框架
        Vue 是渐进式的，我们可以根据需求逐步引入想要的功能。

双向数据绑定
        Vue.js 提供了类似于 Angular 的双向数据绑定机制，确保了数据和页面的自动同步。

组件化
        Vue.js 是基于组件构建的，我们可以通过创建和复用组件来构建复杂的 UI 界面。每个组件都有其独立的逻辑、样式和视图。

虚拟 DOM
        Vue.js 使用虚拟 DOM 技术来提高性能。通过对比虚拟 DOM 中的差异，只对真正发生变化的部分进行更新，从而减少不必要的 DOM 操作。

指令系统
Vue 提供了一些内置指令（如 v-if、v-for、v-model 等），简化了对 DOM 的操作。

简单上手
下载引用
        首先需要下载Vue.js，可以在Vue官网下载vue.js以及vue.min.js。随后直接在需要的页面中引入js即可。注意：在开发时不要使用压缩版本，否则会没有报错提示和警告。

vue.js devtools
        我们可以在浏览器的插件商店中下载vue.js devtools。这个插件可以让我们清晰的看到页面中的Vue结构，并且可以直接通过这个插件对Vue数据进行测试修改，观察页面的变化。

正式使用


你好，{{name}}，欢迎来到{{address}}


    <script type="text/javascript" >
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        //创建Vue实例
        new Vue({
            el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name:'jack',
                address:'北京'
            }
        })

    </script>

效果图：

小结：
容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为【Vue模板】
Vue实例和容器是一一对应的（不能一对多或者多对一）
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
双大括号中要写js表达式，其中的内容可以自动读取到data中的所有属性
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
模板语法 
        Vue的模板语法有两大类:

插值语法
        功能：用于解析标签体内容。

        写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

指令语法
       功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）。

       举例：v-bind:href=”xxx” 或  简写为 :href=”xxx”，xxx同样要写js表达式，

且可以直接读取到data中的所有属性。

示例:


插值语法


你好，{{name}}



指令语法


{{obj.name}}一下，你就知道
{{obj.name}}一下，你就知道

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#root',
        data:{ 
            name:'jack',
            obj:{// data中也可以有对象
                name:'百度',
                url:'http://www.baidu.com',
            }
        }
    })
</script>

效果：

数据绑定
Vue中有2种数据绑定的方式：

 单向绑定(v-bind)
        数据只能从data流向页面

双向绑定(v-model)
        数据不仅能从data流向页面，还可以从页面流向data

双向绑定只能应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
示例:



        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name"><br/>

        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
        <!-- <h2 v-model:x="name">你好啊</h2> -->
    </div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        }
    })
</script>

效果：

        修改了双向绑定的input中的value之后，单项绑定的也会跟着改变，那是因为双向绑定的input不仅改变了页面里的数据，同时还更改了data里的name，而一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

el与data的两种写法
el的两种写法 
new Vue时候配置el属性。
先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
 data的两种写法
对象式
函数式
使用组件时，data必须使用函数式，否则会报错。

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

    <div id="root">
        <h1>你好，&#123;&#123;name&#125;&#125;</h1>
    </div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //el的两种写法
    /* const v = new Vue({
        //el:'#root', //第一种写法
        data:{
            name:'jack'
        }
    })
    console.log(v)
    v.$mount('#root') //第二种写法 */

    //data的两种写法
    new Vue({
        el:'#root',
        //data的第一种写法：对象式
        /* data:{
            name:'jack'
        } */

        //data的第二种写法：函数式
        data(){
            console.log('@@@',this) //此处的this是Vue实例对象
            return{
                name:'jack'
            }
        }
    })
</script>

Vue中的数据代理
        通过vm对象来代理data对象中属性的操作（读/写）

作用
        可以更加方便的操作data中的数据

基本原理
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
输出vm可以发现，data中每个数据都有对应的getter和setter 

 

事件处理
基本使用
使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
@click=”demo” 和 @click=”demo($event)” 效果一致，但后者可以传参；


你好，{{name}}



<button @click=”showInfo1”>点我提示信息1（不传参）
<button @click=”showInfo2($event,66)”>点我提示信息2（传参）

1.阻止默认事件

http://www.atguigu.com" @click.prevent="showInfo">点我提示信息
        点击后只有提示信息，不会跳转页面

  1. 阻止冒泡



        只会弹出一个alert，因为冒泡事件被阻止，如果不阻止则会有两个alert（一个button绑定de ,一个外层div绑定的）

3.事件只触发一次


        只有第一次点击有效，以后的点击将不会有alert

4.开启捕获模式


div1

div2


        开启了事件的捕获模式，点击box2时先触发box1的绑定事件，后触发box2的绑定事件

5.只有event.target是当前操作的元素时才触发事件




        点击button只会触发button的绑定事件，demo1的绑定事件不会被触发，只有真正点击demo1时才会触发

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕


  • 1

  • 2

  • 3

  • 4


        滚动滚轮时，页面立即下滑，不会等待循环结束

7.修饰符的连写

        <!-- 修饰符可以连续写 -->

http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息


        同时实现了stop和prevent的功能

键盘事件
Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键
可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

系统修饰键（用法特殊
        ctrl、alt、shift、meta

        配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

        配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
示例


欢迎来到{{name}}学习