Vue.js 入门篇
程序员文章站
2022-03-22 10:17:21
一、Vue.js 官方网址二、安装 vue,js直接 CDN 引入（较慢）（1）开发版本：设计程序时使用（2）生产版本：发布后使用下载引入（推）（1） 下载地址（2）推荐初学者使用开发版本。NPM 安装三、基础知识ES6 定义变量 / 常量：（1）在 ES6 中使用 let 关键字定义变量，相比 ES5 中使用 var 声明的变量，使用 let 声明的变量有作用域，而使用 var 声明的变量没有作用域的概念。（2）在 ES6 中使用 const ....
一、Vue.js 官方网址
二、安装 vue,js
-
直接 CDN 引入（较慢）
（1）开发版本：设计程序时使用
（2）生产版本：发布后使用 -
下载引入（推）
（1） 下载地址
（2）推荐初学者使用开发版本。 -
NPM 安装
三、基础知识
-
ES6 定义变量 / 常量：
（1）在 ES6 中使用let关键字定义变量，相比 ES5 中使用var声明的变量，使用let声明的变量有作用域，而使用var声明的变量没有作用域的概念。
（2）在 ES6 中使用const声明常量。 -
使用原生 js 操作元素
（1）创建元素，定义 id
（2）定义一个变量，预存储元素数据。
（3）将这个变量里的数据赋给元素。
编程范式：命令式编程 -
使用 vue 操作元素
（1）创建元素，定义id
（2）创建 vue 实例
（3）在 vue 实例中根据 id 获取元素，创建数据。
（4）将数据渲染到元素中。
（5）具体代码如下
编程范式：声明式编程<body> <div id="div0">{{content}}</div> <!-- 引入 vue.js 文件 --> <script src="../js/vue.js"></script> <!-- 编写 vue 代码 --> <script> // 创建 vue 实例 const app = new Vue({ // 获取页面上要被操作的元素 el:"#div0", // 将准备向页面中渲染的数据写到 data 中 data:{ content:"你好！Vue" } }) </script> </body>（6）页面效果如下图所示：
-
Mustache 语法
（1）别名：双大括号语法 {{}}
（2）直接引入 data 中的数据：{{name}}
（3）算数运算：{{a+b}} a 和 b 均为 data 中的数据。
（4）作用范围：只能写在标签的内容部分，不能将其作为标签的属性值进行设置。
（5）上面代码块中的 div 中使用这种语法将 data 中的 content 渲染到界面中。 -
在控制台中修改页面数据
（1）在浏览器中打开控制器（一般浏览器的快捷键为 F12）
（2）在 console 中输入 app.content = “SevenOne” 即可同步页面数据。
（3）如下图所示：
本文地址：https://blog.csdn.net/Mr_peng13/article/details/109232555