Vue 基础入门教程（一）

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入门视频。懒癌犯了…………

Vue 基础入门教程 （一）

猜你喜欢

Vue 基础入门教程（一）