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

Vue简介

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

Vue的核心功能

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

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

何为Vue的渐进式?

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

Vue的特点

采用组件化模式，提高代码复用率和维护性。
声明式编码，让编程人员无需直接操作DOM(无需命令式编码),提高开发效率。
通过虚拟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可以修改页面数据

总结

Vue实例和容器是一一对应的。
真实开发中只有一个Vue实例，配合组件一起使用。
插值语法{{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的语法。

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