Vue基础入门语法学习（Demo详解)

你的名字 2023-10-06 14:28 21阅读 0赞

> 你好我是辰兮，很高兴我们又见面了，快断更一个月了，找了个周末整理相关前端Vue基础，自己学习也分享给初学者，分享获取新知，大家一起进步。

--------------------

#### 文章目录 ####

*   *   *  一、Vue序言
         *  二、基础语法

--------------------

#### 一、Vue序言 ####

vue两大特点：响应式编程、组件化

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

--------------------

Vue视频详情请参考：[Vue.js教程][Vue.js]

文章参考自Vue官网：[Vue.js][Vue.js 1]

--------------------

#### 二、基础语法 ####

相信大家之前都接触过相关的前后端数据交互，代码大同小异。

本篇简单的整理了Vue官网的相关代码，便于大家直接复制实践学习相关的格式。

相关内容包括 简单的绑定、动态绑定，if判断、for循环遍历、click点击事件、v-model等便于了解数据格式。

<head>
    	<meta charset="UTF-8">
    	<title></title>
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
    	<div id="app">
    	
    		{
       { message }}
    		</br>
    		</br>
    
    		<span v-bind:title="message01">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
            </span>
            </br>
    		</br>
    
    		<p v-if="seen">现在你看到我了</p>
    		</br>
    		</br>
    
    		<li v-for="todo in todos">
    			{
       { todo.text }}
    		</li>
    		</br>
    		</br>
    
    		<p>{
       {message02}}</p>
    		<button v-on:click="reverseMessage">反转消息</button>
    		</br>
    		</br>
    
    		<p>{
       { message }}</p>
    		<input v-model="message">
    		</br>
    		</br>
    
    	</div>
    
    </body>
    <script>
    	var app = new Vue({
         
    		el: '#app',
    		data: {
         
    			message: 'Hello Vue!',
    			message01: '页面加载于 ' + new Date().toLocaleString(),
    			seen: true,
    			todos: [{
         
    				text: '学习 JavaScript'
    			}, {
         
    				text: '学习 Vue'
    			}, {
         
    				text: '整个牛项目'
    			}],
    			message02: 'Hello Vue.js!',
    		},
    		methods: {
         
    			reverseMessage: function() {
         
    				this.message02 = this.message02.split('').reverse().join('')
    			}
    		}
    	})
    </script>

相关代码呈现效果图  
![在这里插入图片描述][20200808150150403.png]

--------------------

自定义组件相关代码

<head>
    	<meta charset="UTF-8">
    	<title></title>
    	<script type="text/javascript" src="js/vue.js" ></script>
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
    	
    	<div id="app-7">
    		<ol>
    			
    			<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
    			
    			</todo-item>
    		</ol>
    	</div>
    </body>
    
    <script>
    // 定义名为 todo-item 的新组件
    	Vue.component('todo-item', {
         
    		props: ['todo'],
    		template: '<li>{
         { todo.text }}</li>'
    	})
    	var app7 = new Vue({
         
    		el: '#app-7',
    		data: {
         
    			groceryList: [{
         
    				id: 0,
    				text: '蔬菜'
    			}, {
         
    				id: 1,
    				text: '奶酪'
    			}, {
         
    				id: 2,
    				text: '随便其它什么人吃的东西'
    			}]
    		}
    	})
    </script>

组件的props（ props是一个对象 ）
    作用：接收传递给组件的数据
    特点：
    1、可以给组件传递任意类型的数据
    2、props是只读的对象，只能读取属性的值，无法修改对象

![在这里插入图片描述][20200808151225663.png]  
ps:相关含也是从集合中遍历出对象，然后再绑定数据的id，再显示出对象的相关信息（属性）

![在这里插入图片描述][20200808152351594.png]

--------------------

`The best investment is to invest in yourself.`

![在这里插入图片描述][20200504104023371.jpg]

`2020.08.08 记录辰兮的第88篇博客`

[Vue.js]: https://learning.dcloud.io
[Vue.js 1]: https://cn.vuejs.org/
[20200808150150403.png]: https://img-blog.csdnimg.cn/20200808150150403.png
[20200808151225663.png]: https://img-blog.csdnimg.cn/20200808151225663.png
[20200808152351594.png]: https://img-blog.csdnimg.cn/20200808152351594.png
[20200504104023371.jpg]: https://img-blog.csdnimg.cn/20200504104023371.jpg