标签：el vue 渲染 vuejs app 笔记 学习 Vue message
文章目录
0.准备工作
https://cn.vuejs.org/v2/guide/installation.html
下载好的vue.js可以放在js文件中。
实验工具：vscode编译器。
1.声明式渲染
声明式渲染：将数据渲染进DOM中，也就是网页中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>声明式渲染</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div class="app">
{{message}}
</div>
<script>
var app=new Vue({
//element的缩写是el，作用：挂载元素 。
el:".app", //id是# class是.
data:{
message:"学习Vue!"
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/index.html
2.条件渲染
条件渲染：通过条件的判断，将数据渲染在网页上，类似于后端的if语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">看书</div>
<div v-else-if="type === 'B'">跑步</div>
<div v-else-if="type === 'C'">编程</div>
<div v-else>其他</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
type:'C' //通过修改type的值，来改变渲染的数据
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/conditional.html
3.列表渲染
列表渲染：对多个数据进行渲染，并且代码中有数组的影子，类似于后端的for语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<ul id="example-1">
<li v-for="color in colors">
{{color.message}}
</li>
</ul>
<script>
var app = new Vue({
el:"#example-1",
data:{
colors:[
{message:'red'},
{message:'green'},
{message:'blue'}
]
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/list.html
4.事件处理
事件处理：在网页中单机某个按钮，就会调用方法，执行JavaScript代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="example-1">
<button v-on:click="greet">Greet</button>
</div>
<script>
var app = new Vue({
el:"#example-1",
data:{
message:"play chess"
},
methods:{
greet:function(){
alert(this.message);
}
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/events.html
5.表单输入绑定
表单输入绑定：一般在表单中输入内容之后，会进行双向绑定，会不断地选择方法更新所对应的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单输入绑定</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定 -->
<input type="text" v-model="message"/> <!-- 输入绑定 -->
<p>输入的内容:{{message}}</p> <!-- 单向绑定 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>高级</option>
<option>中级</option>
<option>初级</option>
</select>
<span>选择的级别:{{ selected }}</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"OK",
selected:''
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/forms.html
6.vue组件
vue组件：可以重复使用的vue文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue组件</title>
<!-- 组件是一组被重复使用的模板 -->
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</ul>
</div>
<script>
//定义一个组件
Vue.component("my-component-li",{
props:["item"],
template:'<li>{{item}}</li>'
});
var app = new Vue({
el:"#app",
data:{
items:["egg","fruit","food"]
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/components.html
7.计算属性
计算属性：将计算后的结果缓存起来，转换成静态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
<!-- 计算属性：将计算后的结果缓存起来，转换成静态。 -->
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<p>当前时间方法：{{getCurrentTime()}}</p>
<p>当前时间属性：{{getCurrentTime1}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
getCurrentTime:function(){
return Date.now();
}
},
//计算属性
computed:{
getCurrentTime1:function(){
return Date.now();
}
}
})
</script>
</body>
</html>
从图中观察，得出的计算属性会转成静态，而另一个方法获取的时间会一直变化。
参考网址：
https://cn.vuejs.org/v2/guide/computed.html
8.插槽
插槽：在某一个部分进行数据的使用，类似于自定义组件、自定义标签。例如，定义标题组件、内容组件等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插槽</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems"></todo-items>
</todo>
</div>
<div>
<slot name="todo-title"></slot>
<ul>
<slot name="todo-items"></slot>
</ul>
</div>
<script>
//定义 待办事项 组件
Vue.component("todo",{
template:'<div> <slot name="todo-title"></slot><ul> <slot name="todo-items"></slot></ul></div>'
});
//定义 待办事项-标题 组件
Vue.component("todo-title",{
props:['title'],
template:"<div>{{title}}</div>"
});
//定义 待办事项-内容 组件
Vue.component("todo-items",{
props:['item',"index"],
template:"<li>{{index}}--{{item}}<button @click='remove'>删除</button></li>",
methods:{
remove:function(){
this.$emit("remove");//自定义事件
}
}
});
var app = new Vue({
el:"#app",
data:{
title:'标题',
items:["book","water","river"],
},
methods:{
removeItems:function(index){
this.items.splice(index,1); //删除
}
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/components-slots.html
标签：el,vue,渲染,vuejs,app,笔记,学习,Vue,message 来源： https://blog.csdn.net/William_fang/article/details/122557761
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。