vue的7个属性，8个方法，以及7个指令。787原则

Vue常用7个属性

学习vue的7个属性，8个方法，以及7个指令。787原则

Vue的7种属性

  • el
    绑定id，用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
    相当于一个容器，跟上面的div id = "app"做关联，从此以后上面div id = "app"里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容

  • data
    用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
    跟微信小程序一样，所有的变量都要写在data里面

  • methods
    放置页面中的业务逻辑，js方法一般都放置在methods中

    computed后面会介绍

    computed和methods是有区别的：computed是在值发生改变的时候才会触发效果，而methods只要刷新执行了就会触发，所有平时写VUE的时候，能用computed的尽量使用

  • computed
    定义计算属性的方法
    根据已经存在的属性计算出新的属性，对于同样的数据，会缓存。当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。其实一般情况，我也会把一些关于逻辑的代码都写在computed中。

  • template
    用来设置模板，会替换页面元素，包括占位符
    Vue.component（）组件中会用到，其实很多地方都会用到

  • watch
    watch:function(new,old){ … }监听data中数据的变化，两个参数，一个返回新值，一个返回旧值

    当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时，建议使用watch

    computed和watch是有区别的：

    watch: 监视,能够监听到数据的变化,只要数据变化的时候,都会自定执行对应的方法,其中可以检测的数据来源分为三部分 data , computed , props computed: 计算属性,存在一个计算缓存的特性,每一次计算之后,只要里面的逻辑不发生变化,每一次重复调用,都会使用上一次执行的结果,能够节省计算的时间

  • render
    创建Virtual Dom

Vue的8种方法

  • 生命周期的八个钩子函数，可以在vue的各个阶段添加代码。
  • beforeCreate() 创建实例
  • created() 创建完成
  • beforeMount() 创建模板
  • mounted() 创建完成
  • beforeUpdate() 更新状态
  • updated() 更新完成
  • beforeDestory() 销毁 vue 实例
  • destoryed() 销毁完成

Vue的7种指令

  • v-text 在元素中插入值
  • v-html 在元素中插入html标签和文本
  • v-if 根据表达式的真假值来动态插入和移除元素
  • v-show 根据表达式的真假值通过控制css的display来隐藏和显示元素
  • v-for 根据变量的值来循环渲染元素
  • v-on 监听元素事件，执行相应操作
  • v-bind 绑定元素属性，执行相应操作
  • v-model 绑定input值和变量，实现数据视图的双向绑定

一、基础语法

1、v-bind (用于绑定数据和元素属性)

复制代码
例如：绑定a标签的href属性

<div class="app">
    <a v-bind:href="url">click me</a>
</div>  
var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});
复制代码

2、v-for循环的用法

复制代码
<div id="app">
<!-- 组件：传递给组件中的值：props -->
<tian v-for="item in items" v-bind:tian="item">

</tian>
</div>

<script type="text/javascript">
//定义一个Vue组件Comment
Vue.component("tian",{
props:['tian'],
template:'<li>{{tian}}</li>'
})
var vm = new Vue({
el:"#app",
data:{
items:["Java","Linux","前端"]
}
})
</script>
复制代码

3、v-on:click

复制代码
<div id="app">
<button v-on:click="sayHi()">Me</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"天天"
},
methods:{
//方法必须定义在Vue的Method对象中
sayHi:function(event){
alert(this.message)
}
}
})
</script>
复制代码

二、Vue双向绑定v-model（表单双绑、组件）

复制代码
<div id="app">
输入的文本：<input v-model="message" type="text"/>{{message}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
methods:{},
})
</script>
复制代码

注意: v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将Vue实例的数据作为数据来源。应该通过JavaScript在组件的data选项中声明初始值!

复制代码
<div id="app">
下拉框
<select v-model="selected">
<option value="" disabled="">---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>

<span>value:{{selected}}</span>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
selected:""
},
methods:{},
})
</script>
复制代码

三、Vue组件

复制代码
<div id="app">
<!-- 组件：传递给组件中的值：props -->
<tian v-for="tiandata in items" v-bind:yin="tiandata"></tian>
</div>
</body>
<script type="text/javascript">
//定义一个Vue组件component
Vue.component("tian",{
props:['yin'],
template:'<li>{{yin}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
items:["Java","Linux","前端"]
}
})
</script>
复制代码

四、axios异步通信

Axios是一个开源的可以用在浏览器端和Node3s的异步通信框架，她的主要作用就是实现 AJAX异步通信，其功能特点如下:

·　　从浏览器中创建XMLHttpRequests
·　　从node.js 创建http请求
·　　支持 Promise APl[JS中链式编程]
　　·拦截请求和响应
　　·转换请求数据和响应数据
·　　取消请求
·　　自动转换JSON 数据
·　　客户端支持防御XSRF(跨站请求伪造)

复制代码
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">

</div>
</body>
<script type="text/javascript">
var obj = new Vue({
el:'#app',
mounted() {//钩子函数 链式编程  ES6新特性
axios.get('data.json').then(response=>(console.log(response.data)));
}
});
</script>
复制代码

五、计算属性

复制代码
<div id="app">
currentTime1:{{currentTime1()}}
<br>
currentTime2:{{currentTime2}}
</div>
</body>
<script type="text/javascript">
var obj = new Vue({
el: '#app',
data: {
message: "Hello Vue!"
},
methods: {
currentTime1: function() {
return Date.now(); //返回一个时间戳
}
},
computed: { //计算属性 
//注意：methods，computed 方法名不能重名
//原则上不能重名，重名以后只会调用methods的方法
currentTime2: function() {
return Date.now(); //返回一个时间戳
}}
});
</script>
复制代码

methods:定义方法，调用方法使用currentTime1()，需要带括号

computed:定义计算属性，调用属性使用currentTime2，不需要带括号; this.message是为了能够让currentTime2观察到数据变化而变化

六、插槽slot

复制代码
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems"></todo-items>
</todo>
</div>
</body>
<script type="text/javascript">
//slot:插槽
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'],
template:'<li>{{item}}</li>'
});
var obj = new Vue({
el:'#app',
data:{
title:"天天列表",
todoItems:['Java',"前端","Linux"]
}
});
</script>
复制代码

 

posted @   爵岚  阅读(953)  评论(0)  编辑  收藏  举报
相关博文：
· 狂神说Vue笔记
· vue2.0与vue3.0的区别，快速上手
· VUE7大属性
· vue学习笔记
· Vue笔记
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛