Vue入门

这篇博客介绍了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-textv-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-ifv-showv-elsev-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>
3.2.5 属性绑定

Vue中不能直接使 { { expression}} 语法进行绑定html的标签,而是用它特有的v-bind指令。

语法: <标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>

由于v-bind使用非常频繁,所以Vue提供了简单的写法,可以去掉v-bind直接使用:即可。


                
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值