vue2.x：⼆、vue页⾯开发详解
⼆、vue页⾯开发详解
注：本⽂皆为本⼈⾃⼰实际开发中的了解所得经验，如有不对之处欢迎诸位批评指点
vue2.x 页⾯开发详解
Vue 是⼀套⽤于构建⽤户界⾯的渐进式框架。
本教程均基于vue2.x的版本进⾏编写，搭建的脚⼿架是使⽤的@vue/cli 4，编译⼯具使⽤的是webStorm
1、vue的template内容解析
其中template主要是使⽤html语⾔去编写，再结合vue语法指令来构造页⾯，但是要注意的是template标签中他的⼦元素必须也只能有⼀个元素标签，也就是这样的：
// 正确写法
<template>
<div>
// 在这⾥⾯可以写页⾯代码，这⾥不限制标签数量
</div>
</template>
// 错误写法
<template>
<div>
</div>
<div>
</div>
</template>
vue语法指令主要有数据绑定和指令
1. 数据绑定
在页⾯中数据绑定主要有：⽂本插值、 HTML 代码动态插⼊、动态绑定参数。
⽂本插值：就是使⽤“Mustache”语法 (双⼤括号) 的⽂本插值，当对应的值发⽣变化后页⾯也会相应变更
<span>Message: {{ msg }}</span>
当然也可以通过使⽤ v-once 指令，你也能执⾏⼀次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
HTML 代码动态插⼊：双⼤括号会将数据解释为普通⽂本，⽽⾮ HTML 代码。为了输出真正的 HTML，你需要使⽤ v-html 指令
<span v-html="rawHtml"></span>
动态绑定参数：标签中有⼀些属性可以使⽤v-bind指令进⾏绑定，例如：
<div id="dynamicId"></div>
<a src="mySrc"></a>
也可以使⽤简略语法进⾏动态绑定
<div :id="dynamicId"></div>
<a :src="mySrc"></a>
如果是在表单 input、textarea 及 select 元素上创建双向数据绑定可以⽤ v-model 指令进⾏数据绑定
<input v-model="message"placeholder="edit me">
<p>Message is: {{ message }}</p>
当在input中输⼊值下⾯的页⾯也会动态变更
2. 指令
vue的指令通常以v-开头，如v-bind、v-model，除了上⾯俩个接下来介绍的主要是关于条件渲染、列表渲染和事件处理
1. 条件渲染：
v-if、v-else-if、v-else、v-show 指令⽤于条件性地渲染⼀块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-if、v-else-if、v-else是根据条件决定是否渲染对应元素，如果不渲染⽣成的HTML代码中则没有这块元素代码
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-show 是根据条件决定是否显⽰对应元素，⽆论何种清况都会渲染⽣成代码
<h1 v-show="ok">Hello!</h1>
2. 列表渲染
我们可以⽤ v-for 指令基于⼀个数组来渲染⼀个列表。v-for 指令需要使⽤ item in items 形式的特殊语法，其中 items 是源数据数组，⽽ item 则是被迭代的数组元素的别名，也可以是{item,index} in items，其中index是数组下标
例如：
<ul id="example-1">
<li v-for="item in items":key="ssage">
{{ ssage }}
</li>
</ul>
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
结果：
3. 事件处理
可以⽤ v-on 指令监听 DOM 事件，并在触发时运⾏⼀些 JavaScript 代码，例如：v-on:click，v-on:scroll
<button click="greet">Greet</button>
点击后触发greet⽅法
2、vue的script内容解析
vue页⾯中的script主要是⽤来进⾏实现vue实例的⽣成，详情及介绍：
<script>
export default{
name:'HelloWorld',
props:{
//只有当前页⾯是组件时才定义props，主要作⽤为调⽤当前组件的⽗页⾯或组件向当前组件传参，注意：⽗组件传的值不能在⼦组件中修改变化
msg: String
},
components:{
//加载其中组件时使⽤
},
data(){
// vue中的数据源
return{
id:1
}
},
beforeCreate(){
//vue⽣命周期第⼀步只触发⼀次——初始化data数据源前执⾏
},
created(){
/
/vue⽣命周期第⼆步只触发⼀次——初始化data数据源完成执⾏
},
beforeMount(){
//vue⽣命周期第三步只触发⼀次——完成挂载元素$el的初始化，但是还未替换挂载元素，没有完成vue动态数据绑定渲染
},
mounted(){网页计算器html代码
//vue⽣命周期第四步只触发⼀次——完成挂载元素$el的初始化后，挂载元素替换完成，完成了vue动态数据绑定渲染，此时页⾯已经正常显⽰
},
beforeUpdate(){
//vue⽣命周期第四步后多次触发——页⾯有元素因为data数据源中参数或methods中函数导致变化元
素渲染成功前执⾏
},
updated(){
//vue⽣命周期第四步后多次触发——页⾯有元素因为data数据源中参数或methods中函数导致变化元素渲染成功后执⾏
},
beforeDestroy(){
//vue⽣命周期第五步只触发⼀次——页⾯销毁前执⾏
},
deactivated(){
//vue⽣命周期第六步只触发⼀次——页⾯销毁完成了
},
computed:{
//计算器，可以再这⾥创建⼀个值他是根据其他值变化时动态计算⽽成例如：
newId(){
return this.id+1
}
// 每当data中的id变化时他也会直接变化
},
methods:{
//函数必须写在methods中，也就是页⾯中所有要调⽤的事件⽅法都在这⾥完成,
},
watch:{
/
/，⽤于监听data、computed中参数的变化，例如
id(value,oldvalue){
console.log("变化后的新值：value",value,"变化前的旧值：oldvalue",oldvalue)
}
//如果你今天的值⼜是⼀个层次很深的元素⽐如⼀个Object或者⼀个Array，当你只是修改了⼀个他层次很深的值，是监听不到的，解决办法如下：//    1、创建计算器，将值转成字符串在转成Object或者是Array
//    2、上诉办法⽆效的话可以是⽤this.$set()去修改
//    3、如果修改的参数较多，Object可以在修改完后执⾏这样的操作：
//    this.data=Object.assign({},this.data),array的话还是⽤上⾯俩个操作吧
},
}
</script>
2、vue的style内容解析
style中主要是编写vue页⾯中的详细样式，就是基础的css代码，这⾥不加以介绍了，我这这边就是说⼀下上⼀篇中使⽤的Less这个Css预处理器的使⽤⽅法
⽰例：
<style scoped lang="less">
.test{
&-head{
&:hover{
}
}
}
</style>
其中&就是代表他的⽗级的名称就是相当于这三个css名称是这样的：test、test-head、test-head:hover，并且在元素中也要是这样的⽗⼦层级关系才能渲染样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。