Vue学习(一)——概述及入门

1、vue是什么?

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。也可以说是一个类库。

2、Vue有哪些优点?

    易用、灵活、高效 简单易上手

3、Vue的基本使用

Vue使用的基本步骤: 1、需要提供标签用于填充数据; 注意: 在标签中我们使用插值语法的形式 即 { {}} 进行填充数据 2、引入Vue.js库文件; 注意:一定要先引入Vue文件 再使用Vue语法 因为存在作用域的问题 3、使用Vue的语法做功能; new Vue() 创建一个Vue的实例; 在构造函数中以对象的形式做一些配置 4、利用Vue将数据渲染到页面上。 数据写在data 里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{
          
   {
          
   mag}}</div>
    <div>{
          
   {
          
   1+2}}</div>  <!支持运算>

<script>
    var vue = new Vue({
          
   
        el: "#app",
        data: {
          
   
            mag: "hello vue!"
        }
    });
</script>
</body>
</html>

4、hello vue细节分析

1、实例参数分析

    el:元素的挂载位置(所谓挂载,就是将数据关联在页面中的某个标签里,值可以是CSS选择器或者是DOM元素) data:模型数据(值是一个对象)

2、插值表达式用法(也就是双花括号{ {}})

    将数据填充到HTML标签中; 插值表达式支持基本的计算操作;

3、vue代码运行原理分析

    编译过程(Vue语法为什么能在浏览器中运行?) vue代码通过Vue框架才能转换为原生js代码
经验分享 程序员 微信小程序 职场和发展