1-Vue入门
官网：https://cn.vuejs.org/
1.可以引入CND
2.可以下载vue.js 引入
3.使用vue-cli
具体内容参考上面的网址即可，官网都有。
参照官网下载相关安装npm,vue-cli,生成Demo.
运行
2-Vue基础语法
2-0 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el: '#app',
})
</script>
</html>
2-1创建第一个Vue实例
使用 new vue 去创建一个实例，让这个实例去接管页面中的某一个部分，由el决定。在上面的html中，el: 接管页面上的哪一个element，在截图中接管的是id为app的div
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ chenhui }}</p>
</div>
</body>
<script>
// 创建一个实例，这个实例会接管页面上的某一个部分。
// el ：所在实例会接管 id 为 app的dom节点 。el节点会与哪一个dom节点绑定
// data :message 为 key ,'Hello Vue.js!' 为值
/**
* 在接管的dom中 {{ message }} 显示
*/
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
chenhui: 'nullchen'
}
})
</script>
</html>
2-2挂载点、模板与实例
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<!--挂载点、模板、实例之间的关系-->
<div id="app"> <!-- 这个div标签成为 vue实例的挂载点,vue只会处理挂载点下的内容-->
<!--在挂载点内部的内容称为模板-->
<a>{{ chenhui }}</a>
</div>
</body>
<script>
//实例
new Vue({
el: '#app',
template: "<a>{{message}}</a>", //模板, 如果执行了模板，那么只会显示模板中的内容 比如说上面 <a>{{ chenhui }}</a> 将不会有任何的显示
data: {
message: 'Hello Vue.js!',
chenhui: 'nullchen'
}
})
</script>
</html>
2-3Vue实例中的数据、事件和方法
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 数据、事件 和方法-->
<!--
{{ chenhui }} 插值表达式
会将data 中key为chenhui的value显示出来
-->
<!--
数据
v-text="chenhui" 将chenhui以文本的方式显示
v-html="chenhui" 将chenhui处理成HTML语法显示
-->
<!--
事件的绑定 例如click
v-on:click="singleClick"
当被点击的时候会触发绑定的方法，该方法在vue实例中定义 methods
-->
<!--
方法 在methods中定义
-->
<div id="app">
<h1>hello {{ chenhui }}</h1>
<h1 v-text="chenhui"></h1>
<h1 v-html="chenhui"></h1>
<h1 v-on:click="singleClick">{{ message }}</h1>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
chenhui: '<a style="background: gold;">金闪闪</a>'
},
methods:{
singleClick:function () {
alert("你点击了"+this.message);
this.message = "你很帅。";
}
}
})
</script>
</html>
2-4Vue中的属性绑定和双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 属性绑定
如果 title 不存在，就会出错
只要使用了模板执行，那么 = 后面 就不在是一个字符串了
而是一个表达式了
-->
<div v-bind:title="'你好'+title">Hello world</div>
<!-- 双向数据绑定
v-model 模板执行会影响 content
-->
<input v-model:value="content" />
<div>{{ content }}</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
title:"this is a good job ~",
content:"sss"
}
})
</script>
</html>
2-5Vue中的计算属性和侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input v-model:value='fName'/>
<input v-model:value='lName'/>
<div>{{fName}} {{lName}}</div>
<!--
计算属性
性能比较高，缓存，只有其中一个发生变化时才会去计算-->
<div>{{fullName}}</div>
<!-- watch 侦听器，
监听fName和lName的属性值变化，每发生一次改变就会
count+1
-->
<div> {{ count }}</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
fName:'',
lName:'',
count:0
},
computed:{
fullName: function(){
return this.fName+this.lName;
}
},
watch: {
fName:function(){
this.count++;
},
lName:function(){
this.count++;
}
}
})
</script>
</html>
2-6 v-if v-show v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if 的使用
点击按钮 hello world 会隐藏 隐藏点击会显示
操作的是dom 标签 会删除 在添加
-->
<div v-if="show">hello world</div>
<button v-on:click="singleClick">toggle</button>
<!--
v-show
会给此标签添加 display:none
所以 在需要显示隐藏 显示隐藏的操作上尽量使用v-show
可通过F12查看 HTML中标签的变化
-->
<div v-show="show">hello world</div>
<button v-on:click="singleClick">toggle</button>
</br>
<!--
v-for
循环展示数组中的内容
index 唯一
-->
<div v-for="(item,index) of numlist" v-bind="index">{{ item }}</div>
<!--
v-for
循环展示数组中的内容, 当input框中输入一个内容时 或被添加到 numlist中
index 唯一
-->
<input v-bind:value="content" v/>
<div v-for="(item,index) of numlist" v-bind="index">{{ item }}</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
show:true,
numlist:[1,2,3,5],
content:''
},
methods:{
singleClick:function(){
this.show = !this.show;
}
}
})
</script>
</html>
3-Vue中的组件
3-0 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el: '#app',
})
</script>
</html>
3-1 todolist功能开发
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--
输入内容点击提交的时候，输入的内容会被显示到ul中
-->
<input v-model:value="inputvalue"/>
<button v-on:click="addClick">提交</button>
<ul>
<li v-for="(item,index) of numlist " v-bind:key="index" >
{{ item }},{{ index }}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
inputvalue:'',
numlist:[]
},
methods:{
addClick:function(){
this.numlist.push(this.inputvalue);
this.inputvalue = '';
}
}
})
</script>
</html>
3-2 todolist组件拆分
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--
输入内容点击提交的时候，输入的内容会被显示到ul
全局组件
局部组件
将此部分拆分成一个组件
<li v-for="(item,index) of numlist " v-bind:key="index" >
{{ item }},{{ index }}
</li>
-->
<input v-model:value="inputvalue"/>
<button v-on:click="addClick">提交</button>
<ul>
<todo-item></todo-item>
</ul>
<ul>
<todo-item-child v-for="(item,index) of numlist " v-bind:key="index"
v-bind:content="item + 'chenhui'"
></todo-item-child>
</ul>
<ul>
<li v-for="(item,index) of numlist " v-bind:key="index" >
{{ item }},{{ index }}
</li>
</ul>
</div>
</body>
<script>
//全局组件的模板
Vue.component('todo-item',{
template:'<li>这是我拆分出来的全局组件，在任何的模板里面都可以使用</li>'
})
//局部组件的模板 需要传递参数 不能直接使用content
var TOdoItem = {
props:['content'], //传递的参数
template:'<li>{{content}}</li>'
}
new Vue({
el: '#app',
components:{
'todo-item-child':TOdoItem
},
data:{
inputvalue:'',
numlist:[]
},
methods:{
addClick:function(){
this.numlist.push(this.inputvalue);
this.inputvalue = '';
}
}
})
</script>
</html>
3-3 组件与实例的关系
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app"> <!--挂载点-->
<!--
输入内容点击提交的时候，输入的内容会被显示到ul
全局组件
局部组件
将此部分拆分成一个组件
<li v-for="(item,index) of numlist " v-bind:key="index" >
{{ item }},{{ index }}
</li>
-->
<input v-model:value="inputvalue"/>
<button v-on:click="addClick">提交</button>
<ul>
<todo-item></todo-item>
</ul>
<ul>
<todo-item v-for="(item,index) of numlist " v-bind:key="index"
v-bind:content="item + 'chenhui'"
></todo-item>
</ul>
<ul>
</div>
</body>
<script>
//全局组件的模板 每一个vue的组件都是一个vue的实例
Vue.component('todo-item',{
props:['content'],
template:'<li v-on:click="clicked"> {{ content }}</li>',
//证明组件也是一个实例
methods:{
clicked:function(){
alert("你点击了Vue");
}
}
})
new Vue({
el: '#app',
data:{
inputvalue:'',
numlist:[]
},
methods:{
addClick:function(){
this.numlist.push(this.inputvalue);
this.inputvalue = '';
}
}
})
</script>
</html>
3-4 实现todolist的删除功能
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Insert title here</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app"> <!--挂载点-->
<!--删除-->
<input v-model:value="inputvalue"/>
<button v-on:click="addClick">提交</button>
<ul>
<todo-item v-for="(item,index) of numlist " v-bind:key="index"
v-bind:content="item + 'chenhui'+ index "
v-bind:bottomindex="index"
v-on:delete="deleteEle"
></todo-item>
<!--父组件 监听delete事件,执行deleteEle-->
</ul>
<ul>
</div>
</body>
<script>
Vue.component('todo-item',{
props:['content','bottomindex'],
template:'<li v-on:click="clicked"> {{ content }}</li>',
methods:{
//发布订阅模式 向外触发，并且传递了参数index
clicked:function(){
this.$emit('delete',this.bottomindex) ;
}
}
})
new Vue({
el: '#app',
data:{
inputvalue:'',
numlist:[]
},
methods:{
addClick:function(){
this.numlist.push(this.inputvalue);
this.inputvalue = '';
},
deleteEle:function(bottomindex){
alert('delete'+bottomindex);
this.numlist.splice(bottomindex,1);
}
}
})
</script>
</html>
4 Vue-cli的使用
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
