前言
vue的常用方法演示
一、常用方法和属性是
1.v-if和v-show
v-if和v-show都是通过布尔值来判断是否渲染该标签
当布尔表达式的值为true时会渲染对应的标签对象
代码示例：
<div id="app"> <span v-if="bl"> 显示span1 </span> <span v-show="bl"> 显示span1 </span> </div> <script> let ale=new Vue ({ el:"#app", data:{ num:0, bl:true } })当为false时：
v-if所在的元素就不会被渲染。
v-show所在的元素会被渲染，但是在span标签上添加了display:none;隐藏起来的样式
代码演示：
<div id="app"> <span v-if="bl"> <!--会变为 <!-- --> <!--不会进行渲染--> 显示span1 </span> <span v-show="bl"> 显示span1 <!--会变成<span style="display:none;">显示span1</span> 会在前端进行渲染但是会自动加一个隐藏属性--> </span> </div> <script> let ale=new Vue ({ el:"#app", data:{ num:0, bl:false } }) </script>
2.v-bind
html属性不能使用双大括号形式绑定，只能使用v-bind指令。
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 一般常用于动态绑定元素的class样式
语法:
v-bind:class="{ 样式名称: 布尔表达式 }"
代码演示：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
#box2{
background-color: red;
width: 200px;
height: 200px;
}
.box1{
border: yellow 20px solid;
}
</style>
</head>
<body>
<div id="app">
<!--通过双向绑定来修改数据-->
<input type="button" v-on:click="num++" value="+">
<input type="button" v-on:click="num--" value="-">{{num}} <!--通过插值表达式来进行数据的显示-->
<!--创建一个演示用的盒子用来演示v-bind 这个属性也可以用：代替 -->
<!--v-bind:class="{box1:num>0}" v-bind:需要的选择器这里用的class="{样式名称:布尔表达式可以调用vue里面的数据和方法来进行判定}"-->
<div id="box2" v-bind:class="{box1:num>0}"></div>
</div>
<script>
let aee = new Vue({
el:"#app", //通过id来寻找要渲染的页面属性
data:{ //数据模型用来存储数据可以进行双向绑定进行修
num: 0
}
})
</script>
</body>
</html>3.计算属性
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：我们之前可以这样处理:
之前的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{time()}}
</div>
<script>
let aa=new Vue({
el:"#app", //通过id来寻找要渲染的页面属性
data:{ //数据模型用来存储数据可以进行双向绑定进行修
},
methods:{
time(){
let date = new Date();
// 获取时间并进行转换
return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"-"+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds()
}
}
})
</script>
</body>
</html>使用计算属性的写法：
computed: 计算属性 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{time}}
</div>
<script>
let aa=new Vue({
el:"#app", //通过id来寻找要渲染的页面属性
data:{ //数据模型用来存储数据可以进行双向绑定进行修
},
computed:{
time(){
let date = new Date();
// 获取时间并进行转换
return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"-"+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds()
}
}
})
</script>
</body>
</html>4.watch监听
watch可以让我们监控一个值的变化。从而做出相应的反应
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">{{num}}
</div>
<script>
let app = new Vue({
el:"#app",
data:{
num:0
},
watch:{ //监听器
num(newval,odrval){ //监听的方法名必须和要监听的数据模型里的数据名相同
console.log(newval,odrval) //监听器会自带两个属性第一个属性为新的数据，第二个属性为老的数据 属性名可以自定义
}
}
})
</script>
</body>
</html>二、组件化
组件就是自定义标签
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。在vue里，所有的vue实例都是组件
1.全局组件
组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data必须是一个函数，不再是一个对象。 return 的数据也必须是对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--定义过的组件可以直接通过定义的标签名来引用-->
<!--定义过的组件可以进行复用-->
<count></count>
<count></count>
<count></count>
</div>
<script>
//定义全局组件会有两个值：名称，组件参数
Vue.component("count",{
template:"<button @click='count++'>点了我{{count}}次</button>",
//组件里面的数据模型必须是函数方法
//属性必须是对象
data(){
return {
count:0
}
}
});
//创建一个Vue实例
let app = new Vue({
el:"#app" //选择要渲染的页面元素
})
</script>
</body>
</html>2.局部组件
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box1">
<hello1></hello1>
</div>
</body>
<script>
//定义一个对象
var c = {
template:"<button @click='count++'>点了我{{count}}次</button>",
data(){
return {
count:0
}
}
}
//创建一个vue实例
const app = new Vue({
el:"#box1",// el即element，该vue实例要渲染的页面元素
components:{
hello1:c //将定义的对象注册为局部组件
}
});
</script>
</html>总结
不是专门做前端的，可能写的不怎么样，见谅。