Vue2所学总结

目录

一、初始vue

1、什么是Vue

2、vue的特点

 二、Vue模板语法

Vue模板语法主要有几种

插值:

指令:

三、数据绑定

(1)单向绑定(v-bind)

(2)双向绑定(v-model)

四、el与data的两种写法

1.el有2种写法

 2.data有2种写法

 3.一个重要的原则

4、写法

五、MVVM模型

六、事件修饰符 

七、vue常用指令 

八、计算属性(computed)

九、监视属性(watch) 

十、组件

1、组件的作用

2、组件分类

3、局部组件

4、全局组件

5、父组件给子组件传参 

 6、子组件给父组件传参

十 一、路由

1、在组件中使用路由:(声明式)

 2、在组件中使用路由:(编程式)

十二、axios的使用 


一、初始vue

1、什么是Vue

Vue2所学总结_第1张图片

Vue是一个流行的前端JavaScript框架,用于构建交互式的用户界面和单页面应用程序。

2、vue的特点
  • 易学易用:Vue.js的语法简单易懂,上手容易。

  • 数据驱动视图:Vue.js可以将数据和视图进行关联,当数据发生变化时,视图会自动更新。

  • 组件化开发:Vue.js鼓励使用组件化的开发方式,组件可以独立编写,方便复用和维护。

  • 虚拟DOM:Vue.js通过虚拟DOM技术提高了页面渲染效率。

  • 功能丰富:Vue.js拥有许多插件和工具,可以帮助开发者更快速地构建应用。

 二、Vue模板语法

Vue模板语法主要有几种
  • 插值:

        使用双大括号{{}}进行数据插值,将Vue实例中的数据动态地显示在HTML文档中。

        例:在Vue实例中有一个名为message的属性,它的值将动态地显示在该

元素中。

{{ message }}
  • 指令:

        以v-开头的特殊属性,用于为DOM元素添加交互行为或动态操作。

        例:v-if指令用于条件渲染,根据表达式的值决定是否渲染某个元素。                                         当Vue实例中的 showMessage属性为true时,该

元素才会被渲染,否则不会被渲染。

{{ message }}

三、数据绑定

在Vue中,数据绑定可以分为单向绑定和双向绑定两种方式:

(1)单向绑定(v-bind)
  • 作用:单向绑定将数据源中的值动态地渲染到视图中,实现了数据到视图的更新。
  • 用法举例
{{ message }}

 在上面的例子中,{{ message }}:src="imageUrl"都是单向绑定的用法。它们会将数据源中的messageimageUrl的值动态地渲染到对应的HTML元素中,实现了数据到视图的单向更新。

  • 单向绑定的应用场景和元素:

        1、数据展示:将数据源中的值动态地显示在视图中。

                示例:{{ message }}

        2、属性绑定:将数据源中的值动态地应用到HTML元素的属性上。

                示例::src="imageUrl"

(2)双向绑定(v-model)
  1. 作用:双向绑定不仅实现了数据到视图的更新,还可以将用户的操作反馈到数据源中,实现了视图和数据源之间的双向同步。
  2. 用法举例:

在这个例子中,v-model指令实现了输入框和数据源之间的双向绑定。当用户在输入框中输入内容时,message的值会随之改变;反过来,当message的值改变时,输入框的内容也会同步更新。这样就实现了视图和数据源之间的双向同步。

    3、双向绑定的应用场景和元素:

  • 表单输入:实现用户输入和数据源之间的双向同步。
    • 示例:
  • 复选框和单选按钮:选中状态与数据源之间的双向绑定。
    • 示例:
  • 下拉选择框:选项的选择和数据源之间的双向绑定。
    • 示例:
  • 文本区域:文本内容和数据源之间的双向绑定。
    • 示例:

四、el与data的两种写法

1.el有2种写法
  •   (1).new Vue时候配置el属性。
  •   (2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。

 2.data有2种写法
  • (1).对象式
  • (2).函数式

  如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。

 3.一个重要的原则

    由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。

4、写法
  • 使用el和data选项的对象字面量写法 
new Vue({
  el: '#app', // 根元素
  data: {
    message: 'Hello Vue!', // 数据
    count: 0
  }
});
  • 使用挂载点和data选项的函数写法
const app = new Vue({
  data() {
    return {
      message: 'Hello Vue!', // 数据
      count: 0
    };
  }
});

app.$mount('#app'); // 挂载点

五、MVVM模型

Vue2所学总结_第2张图片

            MVVM模型
                        1. M:模型(Model) :data中的数据
                        2. V:视图(View) :模板代码
                        3. VM:视图模型(ViewModel):Vue实例
            发现:
                        1.data中所有的属性,最后都出现在了vm身上。
                        2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
 

六、事件修饰符 

以下是一些常用的事件修饰符:

  • .stop:阻止事件冒泡。例如,@click.stop会阻止点击事件继续向上冒泡到父元素。

  • .prevent:阻止默认事件。例如,@submit.prevent会阻止表单的提交行为。

  • .capture:使用事件捕获模式而不是冒泡模式。默认情况下,事件是在冒泡阶段触发的,使用.capture修饰符可以改变为捕获阶段触发。

  • .self:只有当事件的目标是当前元素本身时才触发事件处理程序。如果事件冒泡到了目标元素的子元素,事件处理程序将不会被触发。

  • .once:事件只会触发一次,即使在同一个元素上多次触发该事件。

  • .passive:指示浏览器不应该阻止事件的默认行为。这对于滚动事件等性能敏感的事件非常有用。

七、vue常用指令 

  • v-text:将数据作为文本插入到元素中,类似于{{ }}语法。

  • v-html:将数据作为HTML插入到元素中。

  • v-if:根据表达式的值条件性地渲染元素。

  • v-else:与v-if配合使用,在表达式为false时渲染元素。

  • v-show:根据表达式的值条件性地显示或隐藏元素。

  • v-for:基于源数据多次渲染元素或组件。

  • v-on(简写为@):绑定事件监听器,用于在触发DOM事件时执行方法。

  • v-bind(简写为:):动态绑定HTML属性或组件的属性。

  • v-model:用于在表单元素上实现双向数据绑定。

  • v-cloak:用于在Vue实例尚未编译完成时隐藏模板内容。

  • v-once:只渲染元素或组件一次,后续更新将被忽略。

八、计算属性(computed)

计算属性:

          1.定义:要用的属性不存在,要通过已有属性计算得来。

          2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。

          3.get函数什么时候执行?

             (1).初次读取时会执行一次。

             (2).当依赖的数据发生改变时会被再次调用。

          4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

          5.备注:

              1.计算属性最终会出现在vm上,直接读取使用即可。

              2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生

 例:姓名案例


 
姓:

名:

全名:{{fullName}}

九、监视属性(watch) 

 监视属性watch:

       1.当被监视的属性变化时,回调函数自动调用,进行相关操作

       2.监视的属性必须存在,才能进行监视!!

       3.监视的两种写法:

         (1).newVue时传入watch配置

         (2).通过vr$watch监视

例子:天气案例


 

今天天气很{{info}}

十、组件

1、组件的作用

  • 整个项目都是由组件组成
  • 可以让代码复用:相似结构代码可以做成一个组件,直接进行调用就可以使用,提高代码复用性
  • 可以让代码具有可维护性(只要改一处,整个引用的部分全部都变)

 Vue2所学总结_第3张图片

 

2、组件分类

  • 按作用范围分类
    • 全局组件:项目中所有地方都可以的组件称为全局组件
    • 局部组件(私有组件):仅有该组件才能使用的组件称为局部组件
  • 按照用途来分
    • 页面组件
    • 自定义组件

3、局部组件

使用局部组件的具体步骤

  • 第1步:在src下的components下创建一个单文件组件

    单文件组件由三部分组成

    • template:页面的结构的
    • script:该组件的逻辑代码
    • style:该组件的样式的代码

 

 
  • 第2步:通过ES6的import将自定义的组件引入进来
import HelloWorld from './components/HelloWorld.vue'
  • 第3步:注册组件
 
 

注意:在template模板的地方如果要引入局部的自定义组件,可以使用短横线命名法或者使用驼峰式命名法均可 

4、全局组件

定义全局组件的步骤

  • 首先现在src/components下创建自定义组件
  • 在main.js进行全局注册
import HelloWorld from '@/components/HelloWorld.vue'
/* 
  全局注册的语法
  Vue.comoponent(参数1,参数2)
  参数1:组件的名称,这个名称可以在其他组件中直接进行调用
  参数2:导入的组件对象名称
*/
Vue.component('HelloWorld',HelloWorld)
  • 在相应的组件中直接引入
 <HelloWorld>HelloWorld>

5、父组件给子组件传参 

父组件可以通过props属性给子组件传递参数。

以下是一个简单的Vue 2组件示例,演示如何将一个字符串参数传递给子组件:

父组件 



<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello from parent!',
      parentCount: 10
    };
  },
  components: {
    ChildComponent
  }
};
script>

 在子组件中,我们需要声明两个props来分别接收这两个参数:



<script>
export default {
  props: {
    message: String,
    count: Number
  }
};
script>

 6、子组件给父组件传参

 在Vue.js中,子组件可以通过 $emit 方法触发一个自定义事件,并且可以传递数据给父组件。以下是一个简单的 Vue 2 示例,演示如何在子组件中触发自定义事件并将数据传递给父组件:



<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child!');
    }
  }
};
script>

在上面的例子中,我们创建了一个子组件 ChildComponent,其中包含一个按钮。当按钮被点击时,sendMessage 方法会被调用,并通过 $emit 触发名为 message 的自定义事件,同时传递了一个字符串参数 'Hello from child!'

在父组件中,我们可以监听这个自定义事件,并在相应的处理函数中接收传递的数据。以下是一个使用子组件的父组件示例:



<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      message: ''
    };
  },
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      this.message = message;
    }
  }
};
script>

在父组件中,我们首先声明了一个 message 变量,用于存储从子组件接收到的消息。然后,在子组件中使用 @message 监听了子组件触发的 message 自定义事件,并指定了一个处理函数 handleMessage

handleMessage 方法中,我们将接收到的消息赋值给父组件的 message 变量,从而实现了子组件向父组件传递数据的功能。

十 一、路由

要在 Vue.js 中使用路由,你需要先安装和配置 Vue Router。下面是一个使用 Vue Router 的简单示例:

  • 安装 Vue Router: 
npm install vue-router
  • main.js 文件中配置 Vue Router:
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在上面的示例中,我们首先引入了 VueRouter 并通过 Vue.use 告诉 Vue 使用它。

接着,我们定义了一个路由配置数组 routes。每个路由规则都包含一个 path 属性用于匹配路径,以及一个 component 属性指定对应的组件。

然后,我们创建了一个 VueRouter 实例,并传入路由配置数组。

最后,在根 Vue 实例中将路由实例作为选项传入,并使用 $mount 方法将应用程序挂载到指定的元素上。

  • 1、在组件中使用路由:(声明式)

  •  2、在组件中使用路由:(编程式)


<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
};
script>

 

在上面的示例中,我们使用了 组件来创建导航链接。to 属性指定了链接的目标路径。

组件用于渲染匹配到的组件,根据当前路径动态地切换显示不同的组件。

现在你已经完成了基本的路由配置和使用。当用户点击导航链接时,Vue Router 会自动更新应用程序的 URL,并渲染相应的组件。

十二、axios的使用 

一、安装

在项目的根目录,打开终端,输入以下命令行安装Axios

npm install(或简写为 i) axios

Vue2所学总结_第4张图片

二、安装好axios之后,哪些页面需要进行接口数据的调用,就可以在此页面引入axios依赖包。

Vue2所学总结_第5张图片 Vue2所学总结_第6张图片

你可能感兴趣的:(vue.js)