欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 基础入门教程 (一)

程序员文章站 2022-03-04 10:44:02
...

vue简介:Vue的开发模式 和 之前接触的jQuery、原生JSDOM操作是不同的,之前要想修改试图,首先找元素;在使用Vue时,专心把精力放在修改数据。DOM驱动 --> 数据驱动。

一、项目开始

1、为什么使用框架?

提高了代码的复用率
降低模块之间的耦合度
提高开发速度 
提高代码质量

2、搭建环境有两种方式:

方式1):CLI(command line interface 命令行窗口)(构建正式项目时使用)

 #安装nodejs
    https://nodejs.org/en/
 #全局安装 vue-cli
    npm install --global vue-cli
 #创建一个基于 webpack 模板的新项目
    vue init webpack my-project
 #安装依赖,走你
    cd my-project
    npm install
    npm run dev

方式2):直接引入对应的js文件(推荐练习时使用)

二、vue的基础使用  

1、页面的开始 

<div id="container">
    {{msg}}
</div>
<script>
    new Vue({
        el:'#container',
        data:{
            msg:'Hello VueJS 呵呵'
        },    
    });
</script>  

2、Vue的常用指令

1、循环指令
语法1:
<any v-for=" tmp in 集合"></any>
根据in关键词后的集合,去循环创建多个标签,
举例:myList:[100,200,300]
<a v-for="tmp in myList">{{tmp}}</a>

语法2:
<any v-for="(value,key) in 集合"></any>

2、选择指令
<any v-if="表达式"></any>
<any v-else-if="表达式"></any>

v-if指令 : 根据表达式执行的结果的真假 来选择是否要挂载到DOM
v-else-if 
v-else


    3、Vue事件绑定
   

<any v-on:eventName="处理函数名字"></any>
简写:<any @click="handleClick">clickme</any>
Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
v-on:submit.prevent="handleSubmit"

方法在定义时,要放在Vue实例的methods属性
new Vue({
    methods:{
       handleClick:function(){
         //做一些操作
       }
    }
})


    4、Vue其它常用指令
   

v-bind
将变量中的值 通过 v-bind 绑定到元素指定的属性
img v-bind:src="myImage"
a v-bind:href="myLink"
v-bind:style='{backgroundColor:myBGColor}'
v-bind:class='{myRed:isRed}'
v-bind:disabled="!isValid"


v-bind也支持简写
a v-bind:href="myLink"
a :href="myLink"

v-show
v-show="表达式" 根据表达式执行的结果的真假 来切换display显示还是隐藏
v-text
v-text='变量' 根据变量更新对应的文本内容
v-html
v-html="变量"  根据变量更新对应的innerHTML
...


    5、v-model 双向数据绑定

方向1:data --> view
之前所接触的循环、判断、显示隐藏等指令,主要的功能是将数据 绑定到视图;
方式:①双花括号 ②常见的指令

方向2:view --> data
将表单控件中 用户操作的 结果 绑定到 数据
方式:v-model


v-model指令本身就是一个双向数据绑定的指令:既可以将数据绑定到视图,又可以将视图中的结果绑定到数据。
    
修饰符:
.lazy - 取代 input 监听 change 事件(在输入完之后,失去焦点 再去更新)
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤

总结:基础入门第一篇(共四篇,后面会添加三篇 如何搭建项目,如何构建脚手架),超级想录制一期vue入门视频。懒癌犯了…………