vue篇1：vuejs简单入门及案例

最新推荐文章于 2023-10-16 12:32:14 发布

黄土地上好男儿

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量543

点赞数

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_40652265/article/details/108481647

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.Vuejs概述与快速入门

1.1Vuejs介绍

vue.js是一个构建数据驱动的web界面的渐进式框架。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。不仅易于上手，还便于与第三方库或既有项目整合。

1.2MVVM模式

MVVm模式Model-View-ViewModel的简写。它本质就是MVC的改进版。MVVM就是讲其中的view的状态和行为抽象化，让我们讲视图UI和业务逻辑分开。

MVVM模式和MVC模式一样，主要目的是分离视图和模型。

vue.js是一个提供MVVM风格的双向数据绑定的JavaScript库，专注于VIew层，他的核心是MVVM中的VM，也就是ViewModel,ViewModel负责连接view和model层，保证数据和视图的一致，这种轻量级的架构让前端开发更加高效快捷。

过度为：

2.简单案例

2.1

vue.js 下载地址：https://vuejs.org/v2/guide/installation.html

（1）创建项目

（2）

（3）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}} <!-- //vue插值表达式 -->
    </div>
</body>
<script>
    //view model
    //创建vue对象
    new Vue({
        el:"#app",//由vue接管id为app区域
        data:{
            message:"Hello Vue easy"//不加分号
        }
    });
</script>
</html>

（4）

2.2挂载点，模板，实例之前的关系

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>

<script type="text/javascript" src="./vue.min.js"></script>
</head>
<body>

<div id="app"></div>

<div id="app2">{{message}}</div>

var vue2 = new Vue({
el:"#app2",
data:{
message:"你好，vue框架"
}

});
</script>
</body>
</html>

2.3Vue中方法的使用以及属性的改变，Vue实例中的数据，事件，方法

<div id="app2">{{message}}</div>

<div id="app3">

<div v-on:click="()=>{alert('world vue!!!')}">{{msg}}</div>
<div v-on:click="handleClick">{{msg}}</div>

<div @click="handleClick2">{{msg}}</div>
</div>

var vue2 = new Vue({
el:"#app2",
data:{
message:"你好，vue框架"
}
});

2.4vue中属性绑定和双向数据绑定。1）、v-bind:等同于:。2）、v-on:等同于@。3）、双向绑定v-model。

<div id="app1">
<div v-bind:title="title">{{msg}}</div>
<div :title="'I am biehl , ' + title">{{msg}}</div>

<input type="text" name="userName" v-bind:value="content">
<div>{{content}}</div>

<input type="password" name="password" v-model="password">
<div>{{password}}</div>

</div>

</script>
</body>
</html>

2.5Vue中计算属性和侦听器。

<div id="app2">
姓：<input type="text" name="firstName" v-model="firstName" /><br/>
名：<input type="text" name="lastName" v-model="lastName" /> <br/>

姓名：<span>{{firstName}}{{lastName}}</span> <br/>
姓名：<span>{{fullName}}</span><br/>

<div>{{count}}</div>
<div v-text="count"></div>
<div v-html="count"></div>

</div>

2.5Vue中的v-if、v-for、v-show命令。

<div id="app1">

<div v-if="show">{{msg}}</div>
<button type="button" @click="handleClick">toggle</button>

<div v-show="show">{{msg}}</div>
<button type="button" @click="handleClick2">toggle</button>

<ul>

<li v-for="(item,index) of list" :key="item">{{item}}</li>
</ul>
</div>

</script>
</body>
</html>

2.6Vue的全局组件、局部组件。

<div id="app1">
<div>

<input type="text" name="userName" v-model="inputValue"/>

<button @click="handleClick">提交</button>

<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item>
</ul>

</div>
</div>

// 局部组件
var toDoItem = {
props:['content'],
template:'<li>{{content}}</li>'
};

// vue实例
var vue1 = new Vue({
el:"#app1",
//局部组件
components:{
'todo-item':toDoItem
},
data:{
msg:"hello vue!",
inputValue:'',
list:[],
},
methods:{
handleClick:function(){
// vue的思路围绕着数据进行操作的，之前都是操作的dom.
// 判断是否不为空且不为空字符串。
if(this.inputValue != null && this.inputValue != ''){
// 将输入框里面的值加到数组里面，展示在下面的列表里面
this.list.push(this.inputValue),
// 将输入框里面的值设置为空
this.inputValue = ''
}
}
}
});

</script>
</body>

黄土地上好男儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue篇1：vuejs简单入门及案例

1.Vuejs概述与快速入门1.1Vuejs介绍vue.js是一个构建数据驱动的web界面的渐进式框架。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。不仅易于上手，还便于与第三方库或既有项目整合。1.2MVVM模式MVVm模式Model-View-ViewModel的简写。它本质就是MVC的改进版。MVVM就是讲其中的view的状态和行为抽象化，让我们讲视图UI和业务逻辑分开。MVVM模式和MVC模式一样，主要目的是分离视图和模型。vue.js是一个提
复制链接

扫一扫

专栏目录