VUE初级知识

Faye_xue

已于 2022-11-05 17:10:22 修改

阅读量257

点赞数

分类专栏： web网站笔记文章标签：开发语言 vue.js

于 2022-11-05 16:56:08 首次发布

本文链接：https://blog.csdn.net/Faye_xue/article/details/127705581

版权

web网站笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、Vue定义

二、Vue特点

1.采用组件化模式，提高代码复用率、且让代码更好维护

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

1、v-model-----指定标签----双向绑定

2、v-on----指令用于给页面元素绑定事件（通过v-on指令响应事件）

3、v-for----指令语法实现对数组、对象的遍历，遍历数组

五、数组操作方法

总结

一、Vue定义

一套用于构建用户界面的渐进式JavaScript框架

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

核心是一个响应的数据绑定系统。

二、Vue特点

1.采用组件化模式，提高代码复用率、且让代码更好维护

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

三、Vue使用

1、实例参数分析 

el:元素的挂载位置(值可以是CSS选择器或者DOM元素) 

data:模型数据(值是一个对象) 

 <body>
<div id="app">
  <div>{{msg}}</div>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      msg:'Hello  World!!!'
    }
    }
  );
</script>

2、插值表达式用法 

将数据填充到HTML标签中 

插值表达式支持基本的计算操作 

<!--{{}}  插值表达式-->
你选择了：{{language.join('/')}}

3、Vue代码运行原理分析

概述编译过程的概念(Vue语法→原生语法)

四、Vue标签

1、v-model-----指定标签----双向绑定

<div id="app">
  <!-- v-model  指定标签  双向绑定，连接数组，将选项值添加到script中定义的数组中-->
  <input type="checkbox" value="java" v-model="language">Java</br>
  <input type="checkbox" value="PHP" v-model="language">PHP</br>
  <input type="checkbox" value="Python" v-model="language">Python</br>
  <input type="checkbox" value="Go" v-model="language">Go</br>
  <hr>
  <h2>
    <!--{{}}  插值表达式-->
    你选择了：{{language.join('/')}}
  </h2>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      language:[]
    }
    }
  );
</script>

2、v-on----指令用于给页面元素绑定事件（通过v-on指令响应事件）

语法: v-on:事件名="js片段或函数名" @事件名="js片段或函数名"

<div id="app">
  <input type="text" value="失去焦点事件" v-on:blur="open()"/><br>
  <input type="text" value="失去焦点事件" @bliur="open()"/><br>
  <input type="button" value="一个按钮" v-on:click="show()">
  <input type="button" value="一个按钮" @click="show()">
</div>
<script>
  new Vue({
    el:"#app",
    methods:{
      show() {
        alert("我被点了")
      },
      open(){
        alert("我失去焦点了")
      }
    }
  });

</script>

3、v-for----指令语法实现对数组、对象的遍历，遍历数组

语法: v-for="item in items" 

items:要遍历的数组 ,需要在vue中data定义好 

item :循环变量

<div v-for="(user,index) in users">
  {{index+1}}
  {{user.name}}
  {{user.age}}
  {{user.gender}}
</div>
users:[//对象数组
  {"name":"张三","age":16,"gender":"男"},
  {"name":"李四","age":26,"gender":"女"},
  {"name":"王五","age":18,"gender":"男"}
]

v-for除了可以遍历数组,也可迭代对象,语法类似

五、数组操作方法

1、变异方法：变异方法会修改原有的数据 

push():添加元素 

pop() j:删除元素，仅限使用数组单个元素

splice(index,1):根据index删除数组中一个元素 

sort():排序元素 

reverse():反转元素

//增加方法
insertStu(){

    this.persons.push(this.newStu)
    //完成清空
    this.newStu={}
  },
//删除方法
delstu(Id){

    alert(Id)

总结

vue作为一款轻量级框架，门槛低，上手快，简单易学，有两大特点：响应式编程、组件化。其优势在于双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。并且vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。对于他的第三方ui库很多节省开发时间。

Faye_xue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE初级知识

一套用于构建用户界面的渐进式JavaScript框架Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。vue作为一款轻量级框架，门槛低，上手快，简单易学，有两大特点：响应式编程、组件化。其优势在于双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。并且vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。
复制链接

扫一扫