九江市米尔网络科技有限公司
首页 | 联系方式 | 加入收藏 | 设为首页 | 手机站

产品目录

联系方式

联系人:业务部
电话: 00171-378561
邮箱:service@njrjy.com

当前位置:首页 >> 新闻中心 >> 正文

vue入门知识,vue标签

字号:
摘要:vue入门知识,vue标签

技术交流群:365814763

创建一个 Vue 实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
<body>
<div id="app">
{{divValue}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
divValue: 'divValue'
}
});
</script>
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

当创建一个 Vue 实例时,你可以传入一个选项对象。

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

在实例化vue时,有几个属性值:
el 为实例化vue要对应的映射的id,如app,即映射到div中id为app的元素中 实例,el: '#app'

data 我们的数据对象,初始化数值,获得这个实例上的属性 vm.divValue = data.divValue。实例
data:{
input: 'input'
}

methods 里面存放我们定义的一些方法,
methods: {
method1() {},method2() {}....
}

computed 为存放计算属性。实例:
computed: {
computedSum(a,b) {
return a+b;
}
}

components 组件模板,可以先定义好一个组件,在另一个组件中引入并且调用。实例:
components: {
component1,
component2....
}

created 这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中。每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑。一般使用在ajax请求数据,然后渲染dom或者在初始化某些值。实例:
created() {
this.$http.get(url).then((response) => {
response = response.body;
//业务逻辑
});
}

watch 为监听事件,如监听input值的变化,当input值变化时,可以在watch中进行逻辑运算实例:

watch: {
input: function(value){
console.log(value)
//业务逻辑
}
}


props 接受父组件传递的值,组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息

在div中可以使用{{}}获取data中的值,还可以使用以下属性进行一些列操作:
@click="click",为点击事件,方法click必须先定义在methods里:

<body>
<div id="app">
<div @click="click">点击我改变div的值</div>
<div>{{divValue}}</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
divValue: 'divValue'
},
methods: {
click() {
return this.divValue = 'click'
}
}
});
</script>

v-model="input",一般用在输入框中,双向数据绑定,当data中input的值发生改变时,改输入框的值也会发生改变,反之亦然。实例

<body>
<div id="app">
<input v-model="input">
{{input}}
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
input: 'input'
}
});
</script>

v-show=""。条件渲染,使用方式<div v-show="ok"></div> , "ok"可以是一个值,也可以是一个表达式,也可以是一个方法,当ok为true时展示此div,否则不展示

实例:
<body>
<div id="app">
<div v-show="ok">我是定义在data中的值</div>
<div v-show="okMethod">我是定义在方法中值</div>
<div v-show="okCompute == ok">我是一个计算表达式</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
divValue: 'divValue',
ok: true,
okCompute: true
},
methods:{
okMethod() {
return true
}
}
});
</script>

v-if="",v-else=""。条件渲染与v-show用法大致相同,不同的是它有v-else方法。
<div id="app">
<div v-if="ok">当ok为true展示我</div>
<div v-else>否则展示我</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
divValue: 'divValue',
ok: true
}
});
</script>

v-for="(index,Object) in Objects" key="index",为循环渲染列表,当没有使用到index时可以简写为v-for="Object in Objects"。实例:
<div id="app">
<ul>
<li v-for="(object,index) in Objects" key="index" @click="click(index)">{{object.id}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
Objects: [{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"},{"id":"5"}]
},
methods: {
click(index) {
console.log(index)
}
}
});
</script>

v-bind:class="{ active: isActive }" 可以简写:class,为绑定css样式事件,其中active可以是一个计算式,也可以是定义好的一个样式。实例:为原来的self样式添加了active新样式

<body>
<div id="app">
<div class="self" v-bind:class="{ active: isActive }">我变红了</div>
</div>
</body>
<style type="text/css">
.self{
background-color: red
}
.active{
background-color: blue
}
</style>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
isActive: true
}
});
</script>