（1）Vue基础——1.1vue简介 和 1.2 hello demo

学习曲线

  1. vue基础

  2. vue-Cli

  3. vue-router

  4. vuex

  5. element-ui

  6. vue3

 

一、vue基础

1.1vue简介

1.Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue 被设计为可以自底向上逐层应用 

  1. 简单应用：只需要一个轻量小巧的核心库
  2. 复杂应用：可以引入各式各样的Vue插件

2.Vue的发明者是 尤雨溪

3.Vue的特点

 

 

 

 

 

 不用一步一步教它怎么实现 可以直接使用命令去声明

 

 

 

 

 

 

 

 

 

 

1.2 vue官网学习指南

官方学习网址：https://cn.vuejs.org/

按教程学习

按API查阅

按照官方学习文档进行安装

 

① 安装VUE

2种方式

方式一：<Script>引入

1.直接使用<Script>引入网络资源为了更快速加入CDN <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

2.也可以引入本地资源  <script src="../vue.js"></script>

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

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

方式二：NPM安装

npm install vue 之后配合vue的脚手架 vue-cli 



 ②安装Vue  vue-devtools


https://www.cnblogs.com/chenxiaomeng/p/16452457.html


 


 


1.3 初识vue 和 实现hello demo




<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Know Vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
    <!-- shift+alt+a注释快捷键
        1.想让Vue工作，就必创建一个Vue实例，且要传入一个配置对象
        2.root容器中的代码依然符合html规范，只不过混入了一些Vue语法
        3.容器中的代码被称为【Vue模板】 
        4.Vue实例和容器是一一对应的
        5.真实开发中只有一个Vue实例，并且会配合组件一起使用
        6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
        7.一旦data中的数据改变,页面中用到数据的地方会自动更新

        注意区分：js表达式 和 js代码（语句）
        1.表达式：一个表达式会生成一个值，可放在任何一个需要值的地方：
            （1）a
            （2）a+b
            （3）demo(1)
             (4) x == y?'a','b'

        2.js语句
            （1）判断语句 if() {}  控制走不走
             (2) 循环语句 for(){}  控制走几次
        
    -->
        <div id = "hello">
            <h1>hello,{{name.toUpperCase()}},{{address}},{{Date.now()}}</h1>        
        </div>

        <script type="text/javascript">
           Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示
           const x = new Vue({
                el:"#hello", //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串//el:document.getElementById('hello') 也可以用
                //插值语法，data中存储的数据供el所指定的容器去使用，值先暂时写成一个对象
                data:{
                    name:'xiaomeng',
                    address:'Xiamen'
                }
           })
        </script>
    </body>
</html>




实现的效果如下：




 







            

            
posted @ 
2022-07-04 21:18 
陈晓猛 
阅读(107) 
评论(0) 
 
收藏 
举报