【Vue】Vue2.0+Vue3.0学习笔记day01

西西歪歪西歪

已于 2022-02-19 17:55:18 修改

阅读量659

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-01-02 14:43:09 首次发布

本文链接：https://blog.csdn.net/weixin_58214412/article/details/122266900

版权

Vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

001.课程简介

002.Vue简介

00.3V官网指南

官方文档

004.搭建Vue开发环境

1. 安装Vue：

这里使用直接用<script>引入的方法，选择开发版本点击进去后出现源代码右击选择另存为,选择你要保存到的路径中

请注意我们不推荐新手直接使用 vue-cli的方法安装

`2.引入Vue`

安装vue后，新建一个HTML文件(输入！按回车即可）引入vue

    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>

引入vue后，在扩展商品安装live server插件然后右击选择open with live server跳转到网页进入调试模式（按F12即可进入）

3.安装开发者工具

下载chrome扩展插件，打开网址选择红框点击下载

由于在国内很难打开应用商店的网址，所以提供以下扩展链接，可供提取按下面步骤安装

Vue开发者工具扩展链接：
【下载开发者工具】：
https://pan.baidu.com/s/1MtYvMPew4lb14piIrs9x6w
提取码：6666
【安装开发者工具】：
一、Chrome浏览器安装方式：
①：点击右上角三个点
②：点击更多工具
③：点击扩展程序
④：点击右上角的开发者模式，将他启用
⑤：将下载的Vue.crx文件直接拖动到浏览器窗口即可
二：Edge浏览器安装方式
①：点击浏览器右上角的三个点
②：点击扩展
③：点击左下角的开发人员模式，将他启用
④：将Vue.crx文件拖动到浏览器即可

完成上面步骤后点击红框，进行勾选

安装完开发者工具后控制台变成了这样

4.全局配置

Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：

productionTip

类型：boolean
默认值：true
用法：

设置为 false 以阻止 vue 在启动时生成生产提示。

<body>
    <script>
        Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示
    </script>
</body>

配置好productionTip后控制台提示没了

005.hello小案例

<body>
    <!-- 
        初识Vue：
          1.想让Vue工作，就必须创建一个Vue实例，而且要传入一个配置对象
          2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法
          3.root容器里的代码被称为【Vue模板】
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello, {{name}}</h1>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪122'
            }
        })
    </script>
</body>

006.分析hello案例

 <!-- 
        初识Vue：
          1.想让Vue工作，就必须创建一个Vue实例，而且要传入一个配置对象
          2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法
          3.root容器里的代码被称为【Vue模板】
          4.Vue实例和容器是一一对应的
          5.真实开发中只有一个Vue实例，并且会配合着组件一起使用
          6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
          7.一旦data中的数据发生变化，那么页面中用到该数据的地方也会自动更新

          注意区分：js表达式和js代码（语句）
            1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方（属于js代码）
              1 a （定义好的数据）
              2 a+b
              3 demo(1)
              4 x===y?'a':'b'
             2.js代码（语句）
               1 if(){}
               2 for(){} 
     -->
     
    <!-- 准备好一个容器 -->

007.模板语法

<body>
    <!-- 
        Vue模板语法有两大类
          1.插值语法：
            功能：用于解析标签体内容
            写法：{{xxx}}，xxx是js表达式，且可以读取到data中的所有属性
          2.指令语法：
            功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
            举例：v-bind:href="xxx"或简写为:href="xxx" ,xxx同样要写js表达式，
                  且可以直接读取到data中的所有属性
            备注：Vue中有很多指令且形式都是：v-xx,此处我们只是拿v-bind举例       
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习1</a>
        <a :href="school.url">点我去{{school.name}}学习2</a>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'Jack',
                school:{
                    name:'尚硅谷',
                    url:'https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343'
                }
            }
        })
    </script>
</body>