Vue框架-01-了解并使用Vue

Vue简介

Vue是一款用于构建用户界面的JavaScript渐进式框架，基于标准HTML,CSS,和JavaScript构建，并提供换一套声明式、组件化的编程模型。帮助你高效地开发用户界面。由尤雨溪先生写的。

Vue的核心功能

声明式渲染: Vue基于标准的Html拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。

响应式: Vue会自动跟踪JavaScript状态变化并在改变发生时响应式更新DOM。

何为Vue的渐进式?

Vue是可以自底向上逐层的应用。从简单应用（只需要一个轻量级的核心库）到复杂应用:可以引入各式各样的Vue插件。

Vue的特点

1. 采用组件化模式，提高代码复用率和维护性。
2. 声明式编码，让编程人员无需直接操作DOM(无需命令式编码),提高开发效率。
   
3. 通过虚拟DOM和优秀的Diff算法提高了性能。尽量复用DOM节点。
   

Vue的安装

点击Vue2的教程选择安装，如下所示:

开发版本包含警告和调试模式，而生成版本忽略了警告模式，并且所占体积小。

打开Visual Studio Code开发工具，导入下载的vue.js,如下所示。

技巧:
1.可以通过copy line down 命令行来设置自己的复制光标所在位置的内容到下一行。
2.通过输入!可以快速的生产html基本结构。

运行打开我们的控制台，出现警告如下所示:

解决警告:
1.Download the Vue Devtools extension for a better development experience:

把Vue的开发工具下载即可解除。

选择Chrome的开发工具安装。国外下载比较慢，可以去百度搜索下载。

把安装包放入浏览器的管理拓展程序中，记得打开开发者模式。

2.You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

打开vue学习找到api,如下所示:

打开控制台观察我们的vue

将productionType关闭即可。

在html文件中添加如下代码:

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

使用Vue

Vue的简单Hello小案例:

在html里写一个div容器。

    <!-- 准备好一个容器 -->
    <div id="#root">
        <h1>hello,尚硅谷</h1>
    </div>

打开浏览器控制台查看，发现我们的网页出现404错误，网站的页签图标未找到，浏览器会默认请求页签图标。

加入一个命名为favicon.ico小图标问题解决。

使用Vue步骤:

1.创建一个Vue实例

2.给Vue实例传入配置对象

3.容器内部取值会去Vue实例的data区域的属性中去取。

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
        <!-- 插值语法: 用于标签体内部，双括号内的内容是一个JS表达式,会去读取vue所有的属性，并将对应的属性 -->
    </div>


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

        new Vue({
            el: '#root',    //el用来指定当前Vue实例为哪个容器服务。
            //el: document.getElementById('root')  //自己找到容器绑定在Vue实例中
            data:{  //data用来存储数据，数据供el所指定的容器使用。
                name:'张三',
                age: 12
            }
        })
    </script>

总结:

1.使用Vue,首先需要插件一个Vue实例，且要传入一个配置对象，通过el实现。
2.root内部依旧遵守html规范，只是有一些特殊的Vue语法加入。
3.root容器里面的代码称为Vue模板

Vue实例和div容器之间对应的关系

多个Vue实例为同一个容器服务。

        new Vue({
            el: '#root',    //el用来指定当前Vue实例为哪个容器服务。
            //el: document.getElementById('root')  //自己找到容器绑定在Vue实例中
            data:{  //data用来存储数据，数据供el所指定的容器使用。
                name:'张三',
                age: 12
            }
        })

        new Vue({
            el:'#root',
            data:{
                data:'李四',
                age:'13'
            }
        })

发现Vue实例和容器一一对应，默认使用首先绑定容器的Vue实例。

一个Vue实例为多个容器服务。

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
        <h2>age:{{age}}</h2>
        <!-- 插值语法: 用于标签体内部，双括号内的内容是一个JS表达式,会去读取vue所有的属性，并将对应的属性 -->
    </div>

    <div id="root">
        <h1>sex: {{sex}}</h1>
    </div>
    
    new Vue({
            el: '#root',    //el用来指定当前Vue实例为哪个容器服务。
            //el: document.getElementById('root')  //自己找到容器绑定在Vue实例中
            data:{  //data用来存储数据，数据供el所指定的容器使用。
                name:'张三',
                age: 12,
                sex: '男'
            }
        })

发现Vue实例只能给同名的第一个div服务。

一个Vue实例对应一个div容器。

打开浏览器的Vue可以修改页面数据

总结

1. Vue实例和容器是一一对应的。
2. 真实开发中只有一个Vue实例，配合组件一起使用。
3. 插值语法{{xxx}}的xxx要写js表达式，且xxx可以自动读取到data的所有属性，一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新。

模板语法

模板语法有插值语法和指令语法:

插值语法使用:

   <!-- 插值语法 -->
    <div id="root">
        <h1>插值语法</h1>
        <h2>姓名:{{name}}</h2>
    </div>
    

指令语法使用:

    <!-- 指令语法 v-xxx-->
    <div id="app">
        <h1>指令语法</h1>
        <a v-bind:href="url">点击我进入一个链接</a>
    </div>

对应的Vue实例如下:

       new Vue({
            el:'#root',
            data:{
                name: '张三'
            }
        })

        new Vue({
            el: '#app',
            data:{
                url:"https://blog.csdn.net/paiidds/article/details/127044156"
            }
        })

总结:
1.插值语法:
功能: 用于解析标签体内容
写法: 使用{{xxx}},其中xxx是表达式，且可以直接读取data中的所有属性。
2.指令语法:
功能: 用于解析标签(包括标签属性，标签体内容，绑定事件…)
写法: v-??? 举例v-bind:href=“xxx”,xxx是js表达式且直接读取data中的所有属性。
3.重名的属性，可以将一个重名的属性封装在一个对象中。

数据绑定

数据绑定只好用于输入组件。

 <div id="app">
        单向数据绑定<input v-bind:value="msg">
        双向数据绑定<input v-model:value="msg">
 </div>
      new Vue({
            el:'#app',
            data:{
                msg: 'hello'
            }    
        })

v-bind:单向数据绑定

v- model:双向数据绑定

不是什么情况下都使用v-model,v-model只能应用在表单类元素(输入类元素)上，拥有value属性才行,进行交互。

总结:
总结:
1.单向绑定: 数据只能从data流向页面
2.双向绑定：数据不仅能从data流向页面，也能从页面流向data。
备注:双向绑定一般应用在表单类元素上，可以简写为v-model，默认的属性为value。

el和data的两种写法

el: 指定Vue实例为哪些容器服务

1.el在Vue实例内部指定,如以下形式

      new Vue({
            el:'#app',
            data:{
                msg: 'hello'
            }    
        })

2.使用$mount挂载容器,指定el的值

        const vm = new Vue({})
        vm.$mount('#app')

data:存储数据，用于给el指定的容器提供数据

1.对象式

            //data的第一种写法:对象式
            data:{
                msg: 'hello'
            }  

2.函数式

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

data函数式不支持箭头函数，箭头函数是javaScript的语法。

使用组件时，要使用函数式。