Vue入门01
程序员文章站
2022-04-24 10:29:52
...
NodeJS&npm（了解）
1.安装nodejs
NodeJs下载：https://nodejs.org/en/download/
安装完成Node应该自带了NPM了，在控制台输入npm -v查看安装后的版本
2.idea安装nodejs插件
设置里Plugins中搜索nodejs插件，idea新版自带nodejs插件，不需要安装nodejs插件
3.Npm常用命令
创建前端项目
①初始化：npm init -y(跳过) -----相当于建了一个maven工程
②安装模块：
全局安装(所有项目都能用)
npm install -g vue
npm -g root 查看安装的全局路径
局部安装(当前项目使用)
npm install/i vue
③查看模块：
查看某个模块：npm list vue
列表模块：npm ls
④卸载模块：npm uninstall vue
⑤更新模块：npm update vue
⑥运行工程：npm run dev/test/online --后面配置脚手架使用
⑦编译工程：npm run build
ES6重要语法（掌握）
1.什么是ECMAScript
ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。
2.ES5或ES6常用的一些新特性
1）let&const
let相较于var，他是块级的。
2）解构表达式
数组解构：
对象解构：
3）箭头函数
格式
var 函数名 = (参数列表) => {函数内容}等价于一下代码
var 函数名 = function(参数列表){
函数内容
}
如果参数只有一个可以省略(),函数内容只有一句代码可以省略{}
let person = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数版：
eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
// 简写版：
eat3(food){
console.log(this.name + "在吃" + food);
}
}
MVVM架构详解（了解）
1.Model：
它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
2.View：
它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。
3.ViewModel：
它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；
Vue入门（掌握）
1.安装vue
Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
Vue是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
下载Vue文件到本地，官方提供两个版本：
https://cn.vuejs.org/v2/guide/installation.html
2.Vue实例对象详情
1）Vue实例挂载(el)的标签
<div id="app">
<h1>{{message}}</h1>
</div>
<div class="vueClz">
<h1>{{message}}</h1>
</div>
/*
使用构造函数创建一个vue对象：
这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
id挂载:el:"#id"
class挂载：el:".class"
*/
//id挂载方式：
var app = new Vue({
el : "#app",
data : {
message : "我是id挂载方式"
}
});
//class挂载方式：
var app2 = new Vue({
el : ".vueClz",
data : {
message : "我是class挂载方式"
}
});
2）Vue中的数据(data)详解
<div id="app">
<h1>{{message}}</h1>
<h1>
{{user.name}},今年才:{{user.age}}岁.{{user.color}}<font color="pink">是一个很美丽的颜色</font></br>
</h1>
</div>s
//vue的数据绑定在data属性上，data本身也是一个对象
var app = new Vue({
el : "#app",
data : {
message : "我是一个很单纯的p",
user : {
name : "隔壁老王",
age : 17,
color : "pink"
}
}
});
//Vue实例的数据保存在配置属性data中, data自身也是一个对象.
// 通过Vue实例直接访问data对象中的数据,及时同步的页面上
alert(app.message);
// // 通过Vue实例直接修改data对象中的数据,及时同步的页面上
app.message="p被修改了--》pp";
app.user.name="老刘";
3）Vue中的方法(methods)详解
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象
vue对象.方法名字();
<div id="app">
方法的调用②直接在html模板标签中调用：
{{say()}}
</div>
//vue的数据绑定在data属性上，data本身也是一个对象
//方法的定义在：methods属性上，通过json格式来表示
var app = new Vue({
el : "#app",
data : {
message : "我是一个很单纯的p",
user : {
name : "隔壁老文",
age : 17,
color : "pink"
}
},
methods:{
say:function(){
//this指向当前对象，当前app对象
return "hello:"+this.user.name+"!";
},
swim:function(){
console.debug("小狗的游泳姿势，还不错。。。");
}
}
});
//方法调用①：通过Vue对象实例调用方法
app.swim();
Vue表达式（掌握）
表达式语法
VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<!--简单表达式 -->
<h1>{{5+5}}</h1>
<!-- +:运算，字符串连接 -->
<h1>{{5+"v5"}}</h1>
<h1>{{5+"5"}}</h1>
<!-- -：减法 自动给你转-->
<h1>{{"5"-"5"}}</h1>
<h1>{{5*5}}</h1>
<h1>{{"a"-"b"}}</h1>
<!-- *:乘 -->
<h1>{{"5"*"5"}}</h1>
<!-- / 除-->
<h1>{{5/5}}</h1>
<!-- 三目运算-->
{{show?"男":"女"}}
<!-- 字符串操作-->
{{"大家好,我是cdb的好朋友byd"}}
<br/>
{{"大家好,我是cdb的好朋友byd".length}}
<br/>
{{message.substring(0,4)}}
<br/>
{{"abcdefjheasd".substring(0,4).toUpperCase()}}
</div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
show:true,
message:"大家好,我是cdb"
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
{{user}} 如果有会自动调用toString这个方法<br/>
{{JSON.stringify(user)}}<br/>
{{user.toString()}}<br/>
{{user.name}}<br/>
{{user.age}}<br/>
{{user.eat()}}<br/>
<hr>
{{hobbys}}<br/>
{{hobbys[0]}}<br/>
{{hobbys.length}}<br/>
{{hobbys.toString()}}<br/>
{{hobbys.join("------")}}<br/>
</div>
<script>
var user = {
name:'二胡',
age:18,
eat(){
console.log('吃食物...')
},
toString:function(){
return this.name+"的年龄是"+this.age;
}
}
var app1 = new Vue({
el: '#app1',
data: {
user:user,
hobbys:['唱歌','跳舞','rap','篮球','泡MM']
}
});
</script>
</body>
</html>
Vue指令(掌握)
1.v-text指令
<body>
<div id="app1">
<span v-text="message"></span>
<span v-html="user.username"></span>
</div>
<script>
/**
* 指令: v-开头,设置标签的效果 相当于标签里面的特殊属性
* v-text :相当于innerText
* v-html:相当于innerHTML 会解析标签
*/
var app1 = new Vue({
el: '#app1',
data: {
message:'我啥也不知道',
user:{
username:'<font color="red">真的</font>'
}
}
});
</script>
</body>
2.v-for指令
- {{aaa}}
- {{value}}
<hr> ---下标---
<ul>
<li v-for="(hobby,index) in hobbys">
{{index}} -- {{hobby}}
</li>
</ul>
<hr> ---对象---
<ul>
<li v-for="(value,key,index) in user">
{{index}} -- {{key}}--{{value}}
</li>
</ul>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr v-for="stu in students">
<td>{{stu.id}}</td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
<td>{{stu.sex}}</td>
</tr>
</table>
<body>
<div id="app1">
<!-- <img v-bind:src="imgsrc" v-bind:title="title"/>-->
<img :src="imgsrc" :title="title"/>
<input v-bind="props">
</div>
<script>
var app1=new Vue({
e1:'#app1',
data : {
imgsrc:'./image/1.png',
title :'???',
props:{
type:'test',
name:'username'
}
}
});
</script>
</body>
4.v-model指令
<body>
<div id="app1">
<input type="text" v-model="message">
{{message}}
<h1>绑定到type=checkbox的input表单元素</h1>
打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
data中的值:{{checkboxValue}}
<h1>绑定到type=radio的input表单元素</h1>
打篮球:<input type="radio" v-model="radioValue" value="打篮球1"><br/>
踢足球:<input type="radio" v-model="radioValue" value="踢足球1"><br/>
data中的值:{{radioValue}}
<h1>绑定textarea素</h1>
文本域:<textarea v-model="textAreaValue" value="是打发的说法"></textarea><br/>
data中的值:{{textAreaValue}}
<h1>绑定到单选的select的元素</h1>
技能:<select v-model="skills">
<option value="java">skr</option>
<option value="php">rap</option>
<option value=".net">kanada</option>
</select><br/>
data中的值:{{skills}}
</div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
message:'who are you',
checkboxValue:["唱"],
radioValue:'跳',
textAreaValue:'我不知道你是谁',
skills:'rap'
}
});
</script>
</body>
5.v-show指令
你看的到我
你看不到我
你的分数在80以上嗷
<body>
<div id="app1">
<div v-if="show">你看的到我</div>
<div v-if="hidden">你看不到我</div>
<div v-if="score>80">你的分数在80以上嗷</div>
</div>
<script>
/**
* v-if 如果不存在 就不会在页面上显示出来,标签也是没有
* v-show 控制标签里面的display : 如果值为false display:none
*/
var app1 = new Vue({
el: '#app1',
data: {
"show":true,
"hidden":false,
"score":100,
}
});
</script>
</body>
7.v-else指令
<body>
<div id="app1">
<div v-if="age>=18">成年人可以进来洗jio</div>
<div v-else>未成年人爬出去</div>
</div>
<script>
/**
* v-if 如果不存在 就不会在页面上显示出来,标签也是没有
* v-show 控制标签里面的display : 如果值为false display:none
*/
var app1 = new Vue({
el: '#app1',
data: {
"age":18,
}
});
</script>
</body>
8.v-elseif指令
<body>
<div id="app1">
<div v-if="age>18">成年人可以进来洗jio</div>
<div v-else-if="age=18">你刚好可以进来洗jio</div>
<div v-else>未成年人爬出去</div>
</div>
<script>
/**
* v-if 如果不存在 就不会在页面上显示出来,标签也是没有
* v-show 控制标签里面的display : 如果值为false display:none
*/
var app1 = new Vue({
el: '#app1',
data: {
"age":18,
}
});
</script>
</body>
上一篇： nio示例
下一篇： Netty之前篇——NIO基础