Vue学习记录（1）

最新推荐文章于 2022-09-01 21:55:12 发布

原创最新推荐文章于 2022-09-01 21:55:12 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

Vue

1 篇文章

订阅专栏

本文详细介绍Vue.js的基础知识，包括Vue的历史、与其它框架的对比、基本使用方法如插值表达式、指令、数据绑定及组件使用等，适合初学者快速掌握Vue.js的核心概念。

记录下前段时间学习的vue，方便自己后面回来查看。

ps： vue全家桶套餐： 1. vue - router; 2. vuex; 3. vue-resource 加上构建工具： vue-cli

饿了么：组件

PC端： element-ui

移动端： mint-ui

Vue基础知识：

（1）历史介绍

angular 09年

react 2013年，用户体验好

vue 2014年，用户体验好

（2）前端框架与库的区别

jquery库 -> DOM（操作DOM）+ 请求

art-template 库 - > 模板引擎

框架 = 全方位功能齐全

简易的DOM体验 + 发请求 + 模板引擎 + 路由功能

KFC的世界里，库就是一个小套餐，框架就是全家桶

代码上的不同：

一般使用库的代码，是调用某个函数，我们自己把控库的代码

一般使用框架，其框架在帮我们运行我们编写好的代码

框架：初始化自身的一些行为

执行你所编写的代码

释放一些资源

（3）Vue的起步

1：引包

2：启动

options

目的地

内容template

数据：data 保存数据属性

数据驱动视图：

（4）插值表达式

对象（不要连续3个 {{{ name: 'jack' }}} ）

字符串： {{ 'xxx' }}

判断后的布尔值 {{ true }}

三元表达式： {{ true ? '是正确的' : 'false' }}

可以用于页面中简单粗暴的调试

注意：必须在data这个函数中返回的对象中声明

<div id="app">
            <h3>{{ msg }}</h3>
            <h4>{{ { name : 'team' } }} </h4>
            <p> {{1>2 ? '真':'假'}} </p>
        </div>
    
        <!-- 1.引包 -->
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
             
                //2.创建实例化Vue对象
                //插值模板 模板语法  {{}}    react: {}    angular: {{}}
                new Vue({
                    el: "#app",     //目的地
                    template: "",
                    data: function () {
                        return{
                           msg: '学习vue第一步66' ,
                           msg2 : 1 == 1, 
                            
                        }
                      } 
                });

        </script>

（5）指令

在vue中提供了一些对于页面 + 数据的更为方便的输出，这些操作就叫做指令，以v-xxx表示，比如html页面中的属性 <div v-xxx></div>

比如在angular中以ng-xxx开头的叫做指令

在vue中，以v-xxx开头的就叫做指令，

指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关的DOM操作的绑定。

（6）vue中常见的v-指令：

v-text: 元素的InnerText属性，必须是双标签，跟{{}} 效果是一样的，使用较少

v-html: 元素的innerHTML

v-if: 判断是否插入这个元素，相当于对元素的销毁和创建

v-else-if

v-else

v-show隐藏元素，如果确定要隐藏，会给元素的style加上display: none. 是基于css样式的切换

vue-if s 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show就简单得多，—— 不管初始条件是什么，元素总是会被渲染，并且只是简答地基于CSS进行切换。

各中v-for的属性顺序（了解）数组item，index 对象value，key， index

（7）v-bind的使用（单向绑定数据）

给元素的属性赋值<div id="{{变量}"></div>

可以给已经存在的属性赋值input value

也可以给自定义属性赋值 mydata

语法在元素上v-bind: 属性名="常量 || 变量名”

简写形式：属性名 = "变量名"

vue主要关注视图层

React vs Vue

JSX虚拟DOM 单向数据流 VS 响应式双向绑定 template模板

（8）v-model双向数据绑定

v-model 只适应于在有value 的情况（只能应用在表单控件value UI控件）

关于对象内的this

vue已经把以前this是window或者事件对象的问题搞定了

methos和data 本身是在同一个对象中的，所以在该对象中可以通过this随意取

this.xxx 取 data中的值，this.xxxMethod调methods中的函数

         <div id="app"></div>
        
         <script src="vue.min.js"></script>
         <script type="text/javascript">
          
              new Vue({
                el: '#app',
                template: `
                   <div>
                      <input type="text"  v-model="msg" />
                      <p>{{msg}}</p>
                   </div> 
                `,
                data: function() {
                    return {
                       msg: '测试一下双向绑定数据'  
                    }
                }

              });

          </script>