前端学习（一）

最新推荐文章于 2024-05-12 07:21:47 发布

5chenyu

最新推荐文章于 2024-05-12 07:21:47 发布

阅读量692

点赞数

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

本文链接：https://blog.csdn.net/qq_44529689/article/details/122330662

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

下学期想找一份前端的实习，所以要利用假期多学点东西。

课程：尚硅谷Vue技术

范围：1-7节

一边听新裤子，一边写第一篇学习笔记~

一、Vue介绍

1.Vue定义

Vue定义为一套用于构建用户界面的渐进式框架。

那么，渐进式框架是什么意思呢？

它的官方解释是：主张最少。

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

不过这个定义很难懂，我找到了一个通俗的解释。

渐进式框架的大概意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分。

2.Vue特点

1. 遵循 MVVM 模式

2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3. 它本身只关注 UI, 也可以引入其它第三方库开

二、Vue初体验

1、Vue.js文件

入门阶段，引用vue文件进行vue开发，还没有用到vue-cli。

vue文件有开发版本和生产版本两种。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

老师花了挺大的篇幅讲两者的区别。不过我没有记得太仔细，因为我觉得后期是会用脚手架的（偷了个懒）。

我目前大概能写出三个区别。

（1）代码上，开发版本比生产版本多了“/dist/vue.js”。

（2）光看名字，应该就能猜出一个用于开发，一个用于生产。

（3）开发版本要比生产版本内容多。使用开发版本时出现“警告”，控制台会有相对应的提示，而生产版本则不会有任何提示。

2、初识Vue

1、把vue.js文件放入js文件夹中，创建“初识Vue.html”。

2、在head头部中引入vue文件，代码如下：

    <script type="text/javascript" src="../js/vue.js"></script>

3、在body中创建div容器，里面放置需要在页面上显示的内容。

    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

id="root"

4、在script中放置界面的设置。

    <script type="text/javascript">
        Vue.config.productionTip=false  //设置为 false 以阻止 vue 在启动时生成生产提示。
    
        // 创建Vue实例
        // const x=new Vue({
        new Vue({
            el:'#root',
            data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'尚硅谷'
            }
    // el:element,用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
    // id：#；.（class）：类选择器
        })
    </script>

Vue.config.productionTip=false //设置为 false 以阻止 vue 在启动时生成生产提示。

new Vue（{}） //创建Vue实例

el:"#element" //与body中id号对应，用来指定当前Vue实例为哪个容器服务，值通常为csc选择器字符串

data：{} //用于存储数据

课堂总结：

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.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。

（1）a

（2）a+b

（3）demo(1)

（4）x===y?'a':'b'

js表达式是一种特殊的js代码（语句）

2.js代码（语句）

（1）if(){}

（2）for(){}

3、Vue模板语法

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式）

2. 指令（以 v-开头）

3.1 插值语法

1. 功能: 用于解析标签体内容

2. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析

3.2 指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件

2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析

3. 说明：Vue 中有很多的指令，此处只是用 v-bind 举个例子

dada内可嵌套数据

    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
            name:'尚硅谷',
            url:'http://www.atguigu.com'
            }  
        }
    })

此时body中数据引用需要有一点小改动，需在前面加上“school.”。

"v-bind:"可以缩写为":",用于将内容当成表达式执行。冒号后的内容需在data内，否则会报错。

    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3> 
    <!-- 标签体：你好，{{name}}、指令语法、点我去尚硅谷学习1 -->
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
        <a :href="school.url" :x="hello">点我去{{school.name}}学习2</a> 
        <!-- v-bind:(:)将url当成表达式执行 -->
    </div>