一、初始VUE

1、Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，什么叫做渐进式呢？通俗的讲就是一层一层的，一步一步的来做事情的方式。什么又是框架呢？可以理解为一套完整的解决方案。总结起来理解，vue是一个框架，提供了一套完整的解决方案，同时这个框架是渐进式的，你不必使用整个框架的所有内容，可以根据自身的应用场景只使用一部分

2、框架和库？

框架：字面上理解为架子，会基于自身的特点为用户提供一整套的解决方案，倾向于创造一套需要你来遵守的规则和范例，你可以基于这套架子快速实现应用，但前提是你必须按照它的规则来写，例如：ThinkPHP框架，必须要求你按照它的命名规则、代码组织结构来写

库：讲代码集合成的一个产品，供程序员调用，例如：jquery库，只需要引入使用它的功能就可以了，至于你的应用怎样架构，项目目录怎样组织它并不关心

本质上它们都是一样的，框架可以理解为库的超集，框架中可以引入各种库

二、安装

1、通过CDN直接用 <script> 引入

可以通过CDN直接引入Vue 有开发版本和生成版本可供选择 开发版本：包含完整的警告和调试模式，对于制作原型或学习，你可以这样使用最新版本

 

  • <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 

生成版本：删除了警告，33.30KB min+gzip，对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏
 

 

  • <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
 

2、NPM下载
 

通过NPM下载Vue的源代码，然后通过本地工程路径进行引用
 

 

  • # 最新稳定版
  • $ npm install vue
 

 

这里的截图显示了在桌面创建一个新文件夹-->进入新文件夹-->通过npm下载vue
 

3、命令行工具 (CLI)
 

这个在以后的部门专门讲解...
 

三、快速开始
 

 

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <meta http-equiv="X-UA-Compatible" content="ie=edge">
  • <title>Demo1--快速开始</title>
  • </head>
  • <body>
  • <div id='app'>
  • {{message}}
  • </div>
  • </body>
  • <!-- 引入CDN的vue.js -->
  • <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
  • <!-- 引入本地的vue.js -->
  • <script src="../node_modules/vue/dist/vue.js"></script>
  • <script>
  • new Vue({
  • el:'#app',
  • data:{
  • message:'Hello Vue!'
  • }
  • })
  • </script>
  • </html>
 

html
 

构造器
 

每个 Vue 应用都是通过构造函数 Vue 来创建一个 Vue 的根实例。
 

 

  • new Vue({
  • // 选项
  • })
 

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。在上面的例子中，我们传入了 el 来挂载元素，data 来进行数据的绑定。
 

 

  • new Vue({
  • // 挂载元素
  • el: '#app',
  • // 数据
  • data: {
  • message: 'Hello Vue!'
  • }
  • });
 

less
 

参数 el，是 element 的缩写，用于提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。参数值有 2 种类型，包括 string 和 HTMLElement。el:"#app"表示挂载目标是 id 为 app 的元素，也可写为el:document.getElementById('app')
 

参数 data 表示 Vue 实例的数据对象。上例中，data:{message:'Hello Vue!'}表示变量 message 所代表的真实值为 Hello Vue!
 

模板插值
 

上面有提到，如果只使用 Vue 最基础的声明式渲染的功能，则完全可以把 Vue 当做一个模板引擎来使用，也就是采用模板语法把数据渲染进 DOM。
 

Vue 使用双大括号语法来进行文本插值，下面的 message 相当于一个变量或占位符，最终会表示为真正的文本内容。
 

 

  • <div id='app'>
  • {{ message }}
  • </div>
 

Vue实例
 

可以通过new Vue函数创建出一个新的Vue实例
 

 

  • let vm = new Vue()
  • console.log(vm);
 

可以在创建Vue实例的时候传入相应的选项
 

 

  • let vm = new Vue({
  • el: '#app' //id名为app的元素作为应用的根节点
  • })
  • console.log(vm.$el) //这里打印出相应的根节点
 

vim
 

是的实例属性，除此之外之外，还有一些其他的属性和方法，它们都是以符号开头的，用来和用户自定义的属性区分开
 

初始化时传入的data选项，用来存放相关数据，并且这些数据是响应式的
 

 

  • let vm = new Vue({
  • el: '#app',
  • data: {
  • message: 'Hello Vue!',
  • }
  • });
  • console.log(vm.$data.message);
 

haskell
 

vm.$data.message 与 vm.message是等价的
 

 

  • console.log(vm.$data.message === vm.message); //true
 

当修改message的值，页面的值也相应的更改
 
  

        # vue.js
      
        # javascript
      
        # 前端
      
  
 
 Logo 
Vue
 
前往低代码交流专区
 
 
  
更多推荐
  
 
vue 表单验证
 
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^
 
avatar Vue
 
cover
 
echarts堆叠柱状图
 
 
avatar Vue
 
 
Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"
 
这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...
 
avatar Vue