vue 基础 新手快速入门 实例
文章目录
https://cn.vuejs.org/官方网站 还有文档
这里安装使用nodejs的方式进行安装。
建议小伙伴不回nodejs 的可以看飞机:进行安装和版本切换
https://blog.csdn.net/shi860715/article/details/106223238
1 镜像切换工具
npm install nrm -g
C:\Users\Administrator>npm install nrm -g
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Program Files\nodejs\nrm -> C:\Program Files\nodejs\node_modules\nrm\cli.js
+ nrm@1.2.1
added 494 packages in 46.845s
C:\Users\Administrator>nrm ls
* npm -------- https://registry.npmjs.org/
yarn ------- https://registry.yarnpkg.com/
cnpm ------- http://r.cnpmjs.org/
taobao ----- https://registry.npm.taobao.org/
nj --------- https://registry.nodejitsu.com/
npmMirror -- https://skimdb.npmjs.com/registry/
edunpm ----- http://registry.enpmjs.org/
C:\Users\Administrator>nrm use taobao
Registry has been set to: https://registry.npm.taobao.org/
C:\Users\Administrator>nrm test npm
npm ---- 1794ms
C:\Users\Administrator>nrm test taobao
* taobao - 122ms
C:\Users\Administrator>
nrm ls 查看镜像地址;
nrm test npm 测试速度;
nrm use taobao;
nrm test npm;
C:\Users\Administrator>npm install nrm -g
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Program Files\nodejs\nrm -> C:\Program Files\nodejs\node_modules\nrm\cli.js
+ nrm@1.2.1
added 494 packages in 46.845s
C:\Users\Administrator>nrm ls
* npm -------- https://registry.npmjs.org/
yarn ------- https://registry.yarnpkg.com/
cnpm ------- http://r.cnpmjs.org/
taobao ----- https://registry.npm.taobao.org/
nj --------- https://registry.nodejitsu.com/
npmMirror -- https://skimdb.npmjs.com/registry/
edunpm ----- http://registry.enpmjs.org/
C:\Users\Administrator>nrm use taobao
Registry has been set to: https://registry.npm.taobao.org/
C:\Users\Administrator>nrm test npm
npm ---- 1794ms
C:\Users\Administrator>nrm test taobao
* taobao - 122ms
C:\Users\Administrator>
2 创建工程
2.1创建新新工程 --vue
2.2 创建模块,vue-demo
2.3 初始化工程
npm init -y
2.4 安装vue
#npm install vue --save
2.5 vue页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num"><input type="button" @click="num++" value="+"><br>
<h1> {{ name }},你好!小狗子!!</h1>
<h1> {{ num }},访问流量!!</h1>
<button @click="say">唠嗑</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"张三",
num:10
},
methods:{
say(){
console.log("bb 哈哈哈");
}
}
});
</script>
</body>
</html>
运行效果:
2.6 vue 浏览器插件
链接:https://pan.baidu.com/s/10EKpXTgUukUITWHd1eKiCw
提取码:lmhd
复制这段内容后打开百度网盘手机App,操作更方便哦
下载后,解压缩,通过浏览器安装插件。
2.7 运行效果:
3 指令
3.1 插值表达式
{{}}
3.2 插值闪烁
这种方式在网速不好的情况下,会显示成{{name}},{{num}}这样给用户的体验很不好,建议少用
3.3 指令替换
v-text: 将数据输出到元素的内部,如果过输出数据有html,会作为普通文本输出;
v-html: 将数据出处到元素内部,如果有html代码,会被渲染;
v-text <span v-text="name"></span>
3.4 v-model 数据的双向绑定
上面改的实例中已经有。略 lessons.join(",");
3.5 v-on
在项目中,我们之前用的@click(事件名) 用来绑定事件
3.6 事件修饰符
.stop :阻止事件冒泡
.prevent: 阻止默认事件发生
.capture :使用事件捕获模式
.self : 只有元素自身出发事件才执行(冒泡或捕获都不执行)
.once :只执行一次次
3.7 v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num"><input type="button" @click="num++" value="+"><br>
<h1> {{ name }},你好!小狗子!!</h1>
<h1> {{ num }},访问流量!!</h1>
<button @click="say">唠嗑</button>
<hr>
<ul>
<li v-for=" ( u,i ) in users">
{{i}} {{ u.name + "," + u.age + ","+ u.male }}
</li>
</ul>
<ul>
<li v-for=" (v,k) in users[0]">
{{k}} {{v}}
</li>
</ul>
<ul>
<li v-for=" (v,k,i) in users[0]">
{{i}}{{k}} {{v}}
</li>
</ul>
<ul>
<li v-for=" i in 5">
{{i}}
</li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"张三",
num:10,
users:[
{name:"二球",age:"10",male:"男"},
{name:"张三",age:"10",male:"男"},
{name:"李四",age:"10",male:"男"},
{name:"王五",age:"10",male:"女"}
]
},
methods:{
say(){
console.log("bb 哈哈哈");
}
}
});
</script>
</body>
</html>
3.8 :key
给循环便利的数据指定一个key,这样就不用全部遍历数据,而是只渲染数据修改项,对应的key,这样可以提高渲染效率
<ul>
<li v-for=" (v,k,i) in users[0]" :key=“i”>
{{i}}{{k}} {{v}}
</li>
</ul>
3.9 v-if 和v-show
当结果为true时,所在的元素才会被渲染;
V-if="布尔表达式"
v-show 只是想目标元素样式设置长城display:none,而v-if 会把整个元素移除;
使用场景:在一次性判断的过程中,我们使用v-if 会更好。
而在现实效果中,我们需要频繁的达到隐藏和显示的效果时候,我们用v-show 会更好。
两个元素都没错,只是使用场景不一样;
3.10 v-bind
插值表达式不能够操作元素的属性值,且有些元素的属性是特有的,不属于vue的属性。我们可以通过v-bind来更改,将这个元素的属性转换成一个vue属性:
<div class="">
</div>
<div v-bind:class="color">// 这里的color 是vue data中的属性
</div>
<div :class="color">// 这里的color 是vue data中的属性
</div>
完整示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#mydiv{
height: 100px;
width: 100px;
border: solid 1px red;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="isRed=!isRed">点我改变颜色</button>
<div id="mydiv" :class="{red:isRed,blue:!isRed}">
div
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"张三",
num:10,
users:[
{name:"二球",age:"10",male:"男"},
{name:"张三",age:"10",male:"男"},
{name:"李四",age:"10",male:"男"},
{name:"王五",age:"10",male:"女"}
],
isRed:true
},
methods:{
say(){
console.log("bb 哈哈哈");
}
}
});
</script>
</body>
</html>
3.11 计算属性
计算属性,看起来像方法,但是还是一个属性。在vue插件中,我们看到他就是一个属性。所以在使用过程中,直接使用
您的生日为:
来使用该属性。计算属性,多次调用,只计算执行一次;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#mydiv{
height: 100px;
width: 100px;
border: solid 1px red;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="isRed=!isRed">点我改变颜色</button>
<div id="mydiv" :class="{red:isRed,blue:!isRed}">
div
</div>
<hr>
<h1>您的生日为:<span v-text="brith"></span></h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"张三",
num:10,
users:[
{name:"二球",age:"10",male:"男"},
{name:"张三",age:"10",male:"男"},
{name:"李四",age:"10",male:"男"},
{name:"王五",age:"10",male:"女"}
],
isRed:true,
brithday:1529032123201
},
computed:{
brith(){
const day =new Date(this.brithday);
return day.getFullYear() +"年"+day.getMonth() +"月"+day.getDay()+"日";
}
} ,
methods:{
say(){
console.log("bb 哈哈哈");
}
}
});
</script>
</body>
</html>
3.12 监控 watch
在watch 监控中,有两点:一个为浅监控,还有一个为深度监控;
注意两点的却别和写的方式。浅监控是根据变量引用地址的改变来实现监控的。
watch:{
age(v,oldv){ // 这种方式叫做浅监控,根据值的变化
console.log(v,oldv);
},
person: {
deep:true, // 深度监控,注意些handler 默认的方法
handler(val){
console.log(val.height);
}
}
}
完整实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#mydiv{
height: 100px;
width: 100px;
border: solid 1px red;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="isRed=!isRed">点我改变颜色</button>
<div id="mydiv" :class="{red:isRed,blue:!isRed}">
div
</div>
<hr>
<h1>您的生日为:<span v-text="brith"></span></h1>
<hr>
<h1>{{age}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"张三",
num:10,
users:[
{name:"二球",age:"10",male:"男"},
{name:"张三",age:"10",male:"男"},
{name:"李四",age:"10",male:"男"},
{name:"王五",age:"10",male:"女"}
],
isRed:true,
brithday:1529032123201,
age:20,
person:{
name:"lisi",
height:20
}
},
computed:{
brith(){
const day =new Date(this.brithday);
return day.getFullYear() +"年"+day.getMonth() +"月"+day.getDay()+"日";
}
} ,
watch:{
age(v,oldv){ // 这种方式叫做浅监控,根据值的变化
console.log(v,oldv);
},
person: {
deep:true, // 深度监控,注意些handler 默认的方法
handler(val){
console.log(val.height);
}
}
},
methods:{
say(){
console.log("bb 哈哈哈");
}
}
});
</script>
</body>
</html>
3.13 全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#mydiv{
height: 100px;
width: 100px;
border: solid 1px red;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<counter></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
<!-- 全局自定义组件-->
Vue.component("counter",{
template:'<button @click=\"count++\">您已经点击了我{{count}}次</button>',
data(){
return {
count:0
}
}
});
const app = new Vue({
el:"#app",
data:{ }
});
</script>
</body>
</html>
3.14 局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#mydiv{
height: 100px;
width: 100px;
border: solid 1px red;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<counter></counter>
<!-- -->
<counum></counum>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
<!-- 全局自定义组件-->
Vue.component("counter",{
template:'<button @click=\"count++\">您已经点击了我{{count}}次</button>',
data(){
return {
count:0
}
}
});
// 局部组件, 只能在定义的组件的位置去是哟个该组件
const counum = {
template:'<button @click=\"count++\">您已经点击了我{{count}}次</button>',
data(){
return {
count:0
}
}
};
const app = new Vue({
el:"#app",
data:{ },
components:{
counum
}
});
</script>
</body>
</html>
3.15 父子之间传递消息
props中的值的名字很重要,要和父组件中的v-bind属性要一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<counum :username="msg"></counum>
<forcompent :items="lessons"></forcompent>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 局部组件, 只能在定义的组件的位置去是哟个该组件
const counum = {
template:' <h1>我的名字叫做{{username}},请大家多多关照</h1>',
data(){
return {
count:0
}
},
props:['username']
};
// 这里定义的是一个复杂点的局部组件,当数据为空的时候,我们自己填充一些初始数据保证网页的稳定
const forcompent={
template:'<ul>\n' +
' <li v-for="item in items">{{item}}</li>\n' +
' </ul>',
props:{
items:{
type:Array,
default:['java']
}
}
};
const app = new Vue({
el:"#app",
data:{
msg:"张飞",
lessons:["java","c++","pyhone"]
},
components:{
counum,forcompent
}
});
</script>
</body>
</html>
3.16 子向父通信
原理就是,儿子不能直接修改父亲的属性。而是通过自定义事件,来出发父亲的方法,来改变父亲的属性;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<counter :num="num" @incr="add" @reduce="reduce"></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
<!-- 子父通信-->
const counter = {
template:`
<div>
<button @click="handlerAdd">+</button>
<button @click="handlerReduce">-</button>
<h1> num:{{ num }}</h1>
</div>
`,
props:['num'],
methods:{
handlerAdd(){
this.$emit("incr");
},
handlerReduce(){
this.$emit("reduce");
}
}
};
const app = new Vue({
el:"#app",
data:{
num:0
},
components:{
counter
},
methods: {
add(){
this.num++;
},
reduce(){
this.num--;
}
}
});
</script>
</body>
</html>