Vue基础

Vue简介 1.1 Vue是什么？ 1.2 Vue的作者以及迭代版本 1.3 Vue的特点
搭建Vue开发环境 2.1 安装Vue的方式 2.1.1 第一种安装方式：直接使用script标签引入 2.1.2 第二种安装方式：使用NPM 2.2 Vue小案例 2.3 总结
Vue模板语法
el和data的两种写法 4.1 el的两种写法 4.2 data的两种写法
数据绑定
MVVM模型
数据代理 7.1 Object.definedProperty 7.1.1 definedProperty 方法中的配置项 7.1.2 definedProperty 方法中的getter/setter 7.2 何为数据代理 7.3 Vue中的数据代理
事件处理 8.1事件的基本使用 8.2 事件修饰符 8.2.1 阻止默认事件 8.2.1.1 传统方式使用event.preventDefault()阻止默认事件 8.2.1.2 使用Vue提供的事件修饰符阻止默认事件 8.2.2 阻止事件冒泡 8.2.2.1 传统阻止事件冒泡方式 8.2.2.2 Vue中阻止事件冒泡方式(stop) 8.2.3 事件只触发一次 8.3 键盘修饰符
计算属性与监视属性 9.1 计算属性 9.1.1 姓名案例--插值语法实现 9.1.2 姓名案例--methods实现 9.1.3 计算属性实现 9.1.4 计算属性的简写形式 9.2 监视属性 9.2.1 天气案例 9.2.2 天气案例—监视属性 9.2.3 天气案例--深度监视 9.2.4 监视的简写形式 9.3 watch与computed的比较
class与style绑定
条件渲染
列表渲染 12.1 列表渲染简介 12.2 key的作用与原理 12.2.1 遍历列表时index作为key 12.2.2 遍历时使用id作为key 12.3 列表过滤 12.3 列表排序 12.4 更新数据出现的问题 12.5 模拟一个数据检测
收集表单数据
Vue实例生命周期
过渡&动画
过滤器
内置指令与自定义指令
自定义插件
Vue简介 1.1 Vue是什么？ Vue是一套用于构建用户界面的渐进式JavaScript框架 1 构建用户界面：将数据变成用户可以看到的界面渐进式：是指Vue可以自底向上逐层的应用对于简单应用，只需要轻量小巧的核心库对于复杂应用，可以引入各种Vue插件 1.2 Vue的作者以及迭代版本

1.3 Vue的特点采用组件化的模式，提高代码复用率，并且让代码更好的维护 Vue将相近的部分封装成一个模块，一个模块中包含html，css，js代码，模块可以在任何地方复用，若修改模块中的内容不会影响其他模块

声明式编码，让编码人员无需直接操作DOM，提高开发效率

Vue会将数据先变成虚拟DOM，这样如果数据有变换时，使用Diff算法进行比较，如果新的虚拟DOM与旧的虚拟DOM中有相同的DOM，那么直接复用，能够极大的提升效率

搭建Vue开发环境 2.1 安装Vue的方式 2.1.1 第一种安装方式：直接使用script标签引入使用本地文件

Document

<!-- 
    使用vue开发版本时，浏览器会有相关提示,提示如下，关闭可使用以下代码

        You are running Vue in development mode.
        Make sure to turn on production mode when deploying for production.
        See more tips at https://vuejs.org/guide/deployment.html

     Vue.config 是一个对象，包含Vue的全局配置，一次修改，处处可用，可以在启动应用之前修改相关属性
 -->
 <script>
     Vue.config.productionTip = false;
 </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 使用CDN xxxxxxx

2.1.2 第二种安装方式：使用NPM XXXX

2.2 Vue小案例

Document

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 2.3 总结 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用； 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性； 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；注意区分：js表达式和 js代码(语句) 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方： (1). a (2). a+b (3). demo(1) (4). x === y ? ‘a’ : ‘b’ 2.js代码(语句) (1). if(){} (2). for(){}

Vue模板语法

模板语法

	 -->

<!-- 准备一个容器 -->
<div id="root">
    <h1>插值语法</h1>
    <h1>Hello {{ name }}</h1>
    <hr>
    <h1>指令语法</h1>
    <!-- 
            1. a标签中href变成v-bind:href后，vue会将后面引号中的内容当作js表达式执行
            2. v-bind可以给标签中的任何属性动态绑定值   
                 例如 <a v-bind:href="url" v-bind:x = "hello">点击跳转</a>
            3. v-bind可简写为：   
                 例如 v-bind:href 可简写为 :href
            4. v-bind数据绑定为单向的，vue实例中数据的变化会影响页面，反之不会影响
         -->
    <a v-bind:href="web.url">点击跳转到 {{ web.name }}</a>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            name: 'zhangsan',
            web:{
                name:"baidu",
                url: "www.baidu.com"
            }  
        }
    })
</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 4. el和data的两种写法 4.1 el的两种写法 el和data的两种写法

<script>
    /*
        第一种el的写法，也是初学时最常使用的方式
            这种方式实现时是在实例化vue的时候就指定所
            服务的容器，以达到vue实例与容器关联的目的  
    */

    // new Vue({
    //     el:"#root",
    //     data:{
    //         name:"zhangsan"
    //     }
    // })

    /*
        第二种el的写法
             1. 首先声明一个变量，保存vue实例，然后输出，查看实例的具体内容，如下图所示
             2. 在下图中第一个框中以$符开头的是vue为开发人员提供的，其他不以$开头的不是
             直接为开发人	员使用的，vue底层会调用。
             3. 下图中第二个框中是vue原型对象中的方法(详细内容可见第二幅图)，在其原型对象
             中有一个$mount方法，使用$mount("#root")也可实现el:"#root"同样的功能，而且
             更加灵活，可以在任何需要的时刻指定容器
    */
    const v = new Vue({
        data:{
            name:"zhangsan"
        }
    })
    console.log(v)
    
    // 将v.$mount("#root")放到定时器中，使其经过2秒中再关联容器
    setInterval(() => {
        v.$mount("#root")
    }, 2000);
</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

4.2 data的两种写法

el和data的两种写法

<!-- 
	data与el的2种写法
		1.el有2种写法
			(1).new Vue时候配置el属性。
			(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

<script>

    // data的第一种写法：对象式

    // new Vue({
    //     el:"root",
    //     data:{
    //         name:"zhangsan"
    //     }
    // })


    // data的第二种写法：函数式
    
    /* 
        此写法要求必须返回一个对象，对象中的数据，就是运行中所使用的数据
        使用组件时，必须使用函数式写法
    */
    new Vue({
        el: "#root",

        // 普通函数式写法
        // data:function(){
        //     // 这种写法中，this是Vue实例
        //     return {
        //         name:"zhangsan"
        //     }
        // }

        // 简单函数式写法
        // data() {
        //     // 这种写法中，this是Vue实例
        //     return {
        //         name: "zhangsan"
        //     }
        // }

        // data:()=>{
        //     // 如果使用箭头函数，this则是window，一定不能使用箭头函数
        //     return {
        //         name:"zhangsan"
        //     }
        // }

    })
</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 5. 数据绑定数据绑定

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

    <!-- 
        如下代码式错误的，因为v-model只能应用在表单类元素(输入类元素)上
            简单理解就是元素要有value属性才能使用v-model
     -->
    <h2 v-model:x="name">hello</h2>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            name: "zhangsan"
        }
    })
</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 6. MVVM模型理解MVVM

学校名称：{{name}}

学校地址：{{address}}

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

	const vm = new Vue({
		el:'#root',
		data:{
			name:'baidu',
			address:'北京',
		}
	})
	console.log(vm)
</script>

1. Vue基础

{{ name }}

{{ name }}

{{ name }}

学校名称：{{name}}

学校地址：{{address}}