小白学VUE——快速入门
小白学习VUE参考了：vue官网： https://cn.vuejs.org/
文章目录
- 小白学VUE——快速入门
- 前言：什么是VUE?
- 环境准备：
- vue的js文件
- vscode
- Vue入门程序
- 抽取代码片段
- vue标准语法：
- 什么是vue指令？
- v-bind指令
- 事件单向绑定
- v-model:事件双向绑定
- v-on事件监听指令
- v: on:submit.prevent指令
- v-if 判断指令
- v-for 循环渲染指令
- 结语
前言：什么是VUE?
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
环境准备：
vue的js文件
使用CDN外部导入方法
以下推荐国外比较稳定的两个 CDN，把这些网址放进script标签的src属性下即可，国内还没发现哪一家比较好，目前还是建议下载到本地。
- Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
2.VSCODE软件
(2).使用内部导入方法（自行下载js文件放进工作区js文件夹即可）
导入vue
<script src="js/vue.min.js"></script>
vscode
前往vscode官网下载对应版本的vscode
我选择的是windows 64位
安装之后下载如下插件(包括汉化、ESLint、html、css、live server)
下载完插件之后重启一下就可以正常编写代码了。
Vue入门程序
首先了解一下什么是插值
插值：数据绑定最常见的形式就是使用 **{{…}}（双大括号）**的文本插值：
单独抽出这段来看一下：
Vue即是vue内置的对象，el(element)指的是绑定的元素，可以用#id绑定元素，data指的是定义页面中显示的模型数据，还有未展示的methods，指的是方法
var app = new Vue({
el: "#app",//绑定VUE作用的范围
data: {//定义页面中显示的模型数据
message: 'hello vue'
}
});
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<!-- 插值表达式 获取data里面定义的值 {{message}} -->
<div id="app">{{ message }}</div>
<script>
//创建一个VUE对象
var app = new Vue({
el: "#app",//绑定VUE作用的范围
data: {//定义页面中显示的模型数据
message: 'hello vue'
}
});
</script>
</body>
</html>
抽取代码片段
步骤：文件-首选项-用户片段
输入片段名称回车
点击新建用户片段
复制以下片段覆盖之前的注释内容
{
"vh": {
"prefix": "vh", // 触发的关键字 输入vh按下tab键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
" <script src=\"js/vue.min.js\"></script>",
"</head>",
"",
"<body>",
" <div id=\"app\"></div>",
" <script>",
" var vm=new Vue({",
" el:'#app',",
" data:{},",
" methods:{}",
" });",
" </script>",
"</body>",
"",
"</html>",
],
"description": "vh components"
}
}
此时，新建一个html文件，输入vh在按下tab键即可快速填充内容
vue标准语法：
什么是vue指令？
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
类似于html页面中的属性 `
比如在angular中 以ng-xxx开头的就叫做指令
在vue中 以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定
下面简单介绍一下vue的几个基础指令： v-bind v-if v-for v-on等
v-bind指令
作用：
- 给元素的属性赋值
- 可以给已经存在的属性赋值 input value
- 也可以给自定义属性赋值 mydata
语法
在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"
例：
<div v-bind:原属性名="变量"></div>
<div :属性名="变量"></div>
事件单向绑定
事件单向绑定，可以用 v-bind:属性名="常量||变量名，绑定事件，用插值表达式取出值
<body>
<div id="app">
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- 简写方式 -->
<h2 :title="content">{{message}}</h2>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
content: '我是标题',
message: '页面加载于' + new Date().toDateString()
}
});
</script>
</body>
效果：
v-model:事件双向绑定
你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
<body>
<div id="app">
<!-- 事件单向绑定 -->
<input type="text" v-bind:value="searchMap.keyword">
<!-- 事件双向绑定 -->
<input type="text" v-model="searchMap.keyword">
<p>{{searchMap.keyword}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
searchMap:{
keyword: "vue"
}
}
});
</script>
</body>
效果：
v-on事件监听指令
事件监听可以使用 v-on 指令：
处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
普通使用 v-on:事件名="表达式||函数名"
简写方式 @事件名="表达式"
<body>
<div id="app">
<!-- 绑定单击事件 -->
<button type="button" v-on:click="search()">Click me</button>
<!-- 简写方式 -->
<button type="button" @click="search()">Click me again</button>
<!-- 支持不加括号，但是建议加上括号 -->
<button type="button" @click="search">hello</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
message: "hello vue"
},
methods:{//methods里面可以定义多个方法
search(e){
alert(this.message);
}
}
});
</script>
</body>
v: on:submit.prevent指令
<body>
<div id="app">
<form action="save" v-on:submit.prevent="onSubmitForm">
<input type="text" id="name" v-model="username">
<button type="submit">save</button>
</form>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
username: ""
},
methods:{
onSubmitForm(){
if(this.username){
console.log("提交表单");
}else{
alert('请输入用户名');
}
}
}
});
</script>
</body>
效果:
当输入框没有任何信息，提交表单；
输入框不为空：
v-if 判断指令
条件判断使用 v-if v-else v-else-if指令：
类似于Java里面的if-else，但多了v-else-if，这个指令和v-else必须放在v-if后面，且v-else必须放在最后面
<body>
<div id="app">
<h1>是否继续努力？</h1>
<input type="radio" v-model="ok" name="ok" value="true">是的
<br>
<input type="radio" v-model="ok" name="ok" value="false">不
<br>
<span v-if="ok">{{yes}}</span>
<span v-else>{{no}}</span>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
yes: "加油，胜利就在终点等着你！你会成功的！",
no: "小伙子，跌倒不算什么。站起来，别放弃！",
ok: false
},
methods:{}
});
</script>
</body>
效果
当然选择继续努力咯！
敲代码累了，发个表情包激励一下自己！
v-for 循环渲染指令
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表
<body>
<div id="app">
<!-- 打印1-10 -->
<ul>
<li v-for="n in 10">{{n}}</li>
</ul>
<!-- 打印无序 -->
<ol>
<li v-for="(n, index) in 10">{{n}} -- {{index}}</li>
</ol>
<!-- 打印数组 -->
<table>
<tr>
<td v-for="msg in message"> {{msg}} </td>
</tr>
<tr>
<td v-for="item in items"> {{ item.name }} </td>
</tr>
<tr>
<td v-for="item in items"> {{ item.age }} </td>
</tr>
</table>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
message: ["java","python","javascript"],
items: [
{name: "jack",age:19},
{name: "lucy",age:20},
{name: "tom",age:21},
{name: "mary",age:22}
]
},
methods:{}
});
</script>
</body>
效果：
结语
水平有限，仅供参考，若有纰漏，希望随时指出！
