Vue入门

Pwsifeng

已于 2022-04-02 09:35:55 修改

阅读量1.8k

点赞数

文章标签：前端 vue 前端框架

于 2022-04-01 21:08:22 首次发布

本文链接：https://blog.csdn.net/Pwsifeng/article/details/123907767

版权

这篇博客介绍了Vue.js的基础知识，包括Vue的渐进式特性、MVVM模式、模板指令、Vue实例属性、组件化以及开发工具的使用。重点讲解了Vue的引入、数据绑定、条件指令、循环指令、事件绑定、组件创建和通信方法，还提到了VSCode和HBuilderX的Vue插件安装及使用技巧。

摘要由CSDN通过智能技术生成

第01天_Vue入门

学习路线图: HBuilderX工具的使得->了解Vue工作原理-> 模板语法->组件化->vue-cli完整项目开发

1. Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

学习Vue需要有一定的预备知识, 需要了解HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

2. MVC&MVVM

2.1 MVC

MVC 模式(Model–View–Controller)是软件工程中的一种软件架构模式，它把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）

2.2 MVVM框架

MVVM是由MVC进一步发展而来, 还是分为三个部分: 模型（Model）、视图（View）和控制器（VM）

数据驱动(即是双向的数据绑定) DOM是数据的一种自然映射。双向是指:HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。之前DOM驱动的开发方式尤其是以jQuery为主的开发时代，都是DOM变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的开发时代。

https://baike.baidu.com/pic/MVVM/96310/0/e61190ef76c6a7efe4baffc3fdfaaf51f2de66b2?fr=lemma&ct=single

###3. 模板指令

开发工具的选择：开发vue的工具有很多，比较主流的有vscode、hbuild、webstorm，官方推荐使用hbuildx。可以到官方网站上下载hbuildX软件。

3.1 Vue入门

Vue 可以直接把它当做一个js库使用，可以很简单的接入到你的项目中，或者你只需要使用双向数据绑定。

需求: 网页中有个div标签，而需要有json对象存储数据，把json对象上的数据放到div。

3.1.1 引入Vue库

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

3.1.2 在div标签声明app

<div id='app'></app>

3.1.3 创建Vue对象

创建Vue的对象并把数据绑定到上创建好的div上去, 以下是完整的代码

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue.js -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
		<div id="app">
			<p>message: {
  { message }}</p>
		</div>
</body>
<script>
		new Vue({
     
			// el: element, 让vue绑定一个元素节点(使用css选择器进行匹配)
			el: '#app',
			
           // data: 数据选项,用来存放数据
			data: {
     
				message: "教育"
			},
		})
</script>

3.2 模板指令

通过模版指令(写在html中的)，即是html和vue对象的粘合剂。

3.2.1 数据渲染

数据渲染有v-text、v-html、{ { }} mustache三种方式，用法如下：

<body>
  <div id="app">
			<!-- 数据渲染 -->
			<div>
				<p>{
  { name + 1 }}</p>  <!-- 最常用的渲染方式, 可以实现简单的运算 -->
				<p v-text="name"></p>  <!-- 渲染变量name的值, 不能识别html标签 -->
				<p v-html="name"></p>  <!-- 渲染变量name的值, 能识别html标签 -->
			</div>
  </div>
</body>
<script>
		new Vue({
     
			el: '#app',
			data: {
     
				name: "<b>教育</b>"
			}
		})
</script>

v-text更新元素的textContent， v-html更新元素的innerHTML ，内容按普通HTML插入，不会作为 Vue 模板进行编译。

3.2.2 控制标签

主要用于显示隐藏，包括v-if、v-show、v-else、v-else-if,用法如下：

<body>
  <div id="app">
			<!-- v-if, v-show -->
			<div>
				<p v-if="isShow">科比</p>   <!-- v-if是条件判断语句,判断isShow为真则显示,否则显示v-else中的内容 -->
				<p v-else="isShow">詹姆斯</p>
				
				<p v-show="isShow">库里</p>  <!-- v-show通过判断isShow的真假来显示或隐藏元素(通过改变display) -->
			</div>
  </div>
</body>
<script>
		new Vue({
     
			el: '#app',
			data: {
     
				isShow: false
			}
		})
</script>

v-if是直接不渲染该元素; v-show是通过display: none进行隐藏;

3.2.3 渲染循环

模板引擎都会提供循环的支持，渲染循环使用v-for。基本的用法类似于foreach的用法，详细参考以下代码：

<body>
  <div id="app">
			<!-- v-for -->
			<div>
				<ul>
					<li v-for="item in stars">
						{
  { item.name }}
					</li>
				</ul>
				<ul>
					<li v-for="(item, index) in stars">
						{
  {index}}: {
  { item.name }}
					</li>
				</ul>
			</div>
  </div>
</body>
<script>
		new Vue({
     
			el: '#app',
			data: {
     
				stars: [
					{
     name: "鹿晗"},
					{
     name: "蔡徐坤"},
					{
     name: "李易峰"},
					{
     name: "吴亦凡"},
				],
			}
		})
</script>

3.2.4 事件绑定

事件绑定使用v-on:事件名或者快捷方式@事件名，详细用法如下：

<body>
  <div id="app">
    
    	<p v-show="isShow">科比</p>

			<!-- v-on: 绑定事件 -->
			<div>
				<button v-on:click="btnClick">按钮</button>
				<button @click="btnClick">按钮</button>  <!-- 简写方式 -->
			</div>
  </div>
</body>
<script>
		new Vue({
     
			el: '#app',
			data: {
     
				isShow: false
			},
      methods:{
     
				btnClick() {
     
					this.isShow = !this.isShow
				}
			}
		})
</script>

示例2：

<div id="app">
    <ul>
        <li v-for="item, index in goods">
            <h4>{
  { index }}- {
  { item.name }}</h4>
            <span style="color: blue;">{
  { item.id }}</span>
            <label>￥{
  { item.price }}</span>
            <button v-on:click="delGoods(index, item)">删除购物车</button>
        </li>
    </ul>
</div>

<script>
    // el和data是Vue实例初始化时的属性名
    new Vue({
        el: '#app',
        data: {
            goods: [
                {id: '1001', name: '华为P40', price: 1000},
                {id: '1002', name: '华为P40 Pro', price: 5000},
                {id: '1003', name: '华为P30', price: 2500},
                {id: '1004', name: '华为P30 Pro', price: 3500},
            ]
        },
        methods:{
            delGoods(i, item){
                if(confirm('是否删除'+item.name+"?")){
                    // 从数组中删除指定index位置的1个元素
                    this.goods.splice(i, 1)
                }
            }
        }
    })
</script>