2020-11-23
项目结构
- template:div#app模块:项目的结构,只能存在一个template标签,且template标签中只能存在一个块级元素
- script模块:变量、方法、监视器定义位置
- style模块:组件的style,当设置scoped代表仅在本文件内生效,若要使用scss须在标签中声明
lang=scss
声明式渲染
在div#app中
- 变量以
{{}}
的形式嵌入其中
定义变量
<script>
export default{
name:"app",
data(){
return {
a:'',
b:[],
...
}
}
}
</script>
or
<script>
export default{
name:"app",
data:function(){
return {
a:'',
b:[],
...
}
}
}
</script>
双向绑定
顾名思义,对两个位置的数据进行同步化,一个改变另一个也会发生改变。
双向绑定实现了mvvc架构风格
不同于传统的Model(data)+view(视图)+Control(控制器)的风格,方便了数据交换与数据渲染
双向绑定步骤
在需要绑定的标签中加入 v-model="variable-name"
,在另一端引入声明式渲染。
当然需要使用到我们的变量,我们要在data
中添加变量
使用方法
绑定事件
v-on:click="method-name"
v-on(绑定事件)一类的都可以用@
来表示
@click="method-name"
定义方法
<script>
export default{
name:"app",
methods:{
method-name:function(){
},
method-name2(var v,var s):{
}
}
}
</script>
监听器
为变量绑定监听器,当变量发生变化时进行自定义操作
注:this
指的是当前vue组件,如果想要使用变量时需要使用this.variable-name
来引用
使用监听器
<script>
export default{
name:"app",
methods:{
method-name:function(){
},
method-name2(var v,var s):{
}
},
watch:{
variable-name:{
handler:function(value,oldValue){
//value:新值
//oldValue:旧值,记录修改前的值
//非必要参数,固定顺序
},
immeidate:true,
}
}
}
</script>
- handler:处理函数
- immeidate:页面第一次加载的时候也执行handler
结语
我们不难发现vue的语法的一些相似地方
- script结构中,代码基本上都以
k:v
结构呈现,我们可以方便记忆 - script结构中,
data
实际上是一种带有返回值的function
,返回的结果是一个集合,里面我们可以定义变量
日积月累,乐在其中
感谢您阅读本文章,希望有能帮助到您的地方,也非常欢迎您对本文提出错误和不足的地方