• Vue的入门学习

    Vue基础

    Vue简介

    1、Vue是JavaScript框架
    2、简化DOM操作
    3、响应式的数据驱动（当数据改变，页面也会同步更新）

    第一个Vue程序

    1、导入Vue的CDN

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

    • 1
    • 2

    2、创建Vue实例对象，设置el属性和data属性
    3、使用模板语法将数据渲染到页面上

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		
		<div id="app">
			{
  {message}}
			
		div>
		
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
		<script>
			var app = new Vue({
     
				el:"#app",//选择元素
				//new实例中的数据
				data:{
     
					message:"Hello Vue!123"
				}
			})
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    el属性：设置挂载点

    通过CSS选择器，设置Vue实例管理的元素。设置之后，被el命中的元素内部使用两个大括号 { {}} 修饰的部分，会被data中同名的数据说替换

    Vue的作用范围是el所挂载的标签内部

    el挂载不仅可以使用id选择器，而也可以使用其他选择器，但是建议使用id选择器，因为id选择器是唯一的，而选择其他选择器可能会有多个选择。

    {
  {message}}
<div id="app" class="app">
	{
  {message}}
	<span>{
  {message}}span>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
	var app = new Vue({
     
		// el:"#app",
		el:".app",
		data:{
     
			message:"zhangsan"
		}
	})
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述
    当然，也可以使用其他标签作为挂载标签（双标签，除了html和body），但是建议使用div，因为div没有自己的样式，比较简介。

    data属性：数据选择器

    在data属性当中，不仅有类似于message:"zhngsan"的简单类型，还有数组、对象等复杂类型，那这些数据类型要如何获取呢？

    <div id="app">
	{
  {message}}
	<h2>{
  {school.name}}  {
  {school.mobile}}h2>

	<ul>
		<li>{
  {citys[0]}}li>
		<li>{
  {citys[1]}}li>
		<li>{
  {citys[2]}}li>
		<li>{
  {citys[3]}}li>
	ul>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
	var app = new Vue({
     
		el:"#app",
		data:{
     
			message:"zhangsan",
			school:{
     
				name:"北京大学",
				mobile:"0000-0000-8888"
			},
			citys:["北京","上海","广州","深圳"]
		}
	})
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    Vue本地应用

    v-text 指令

    设置标签的文本值textContext

    <div id="app">
	<h1>设置标签值h1>
	
	<h2 v-text="message">姓名：h2>
	{}}的方法设置值，只有大括号内部的值会被替换，其他值原封不动保留-->
	<h2>姓名：{
  {message}}h2>


	<h1>标签字符串拼接h1>
	
	<h2 v-text="'姓名:' +message+ '!!!'">h2>
	<h2>姓名：{
  {message + "!!!"}}h2>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
	var app = new Vue({
     
		el:"#app",
		data:{
     
			message:"zhangsan"
		}
	})
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    v-html 指令

    设置标签的innerHTML，即如果设置的值是普通文本，则它的功能于 v-text 相同，若为HTML结构，则会被解析。

    <div id="app">
	<h1>v-html标签h1>
	<h2 v-html="message">h2>
	<h2 v-html="context">h2>
	<h1>v-text标签h1>
	<h2 v-text="message">h2>
	<h2 v-text="context">h2>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
	var app = new Vue({
     
		el:"#app",
		data:{
     
			message:"zhangsan",
			context:"百度"
		}
	})
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    v-on指令

    v-on指令为元素绑定事件，当指向特定操作时，如点击、失去焦点等可以添加自定义的逻辑，就可以为对应的事件绑定元素。

    on-click的使用：

    <input type="button" value="事件绑定" v-on:click="方法">
<input type="button" value="事件绑定" @dblclick="方法">

    • 1
    • 2

    示例：

    <div id="app">
	<input type="button" value="v-on指令" v-on:click="doIt">
	<input type="button" value="v-on简写" @click="doIt">
	<input type="button" value="双击事件" @dblclick="doIt">

    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    持续集成交付CICD：安装Jenkins Slave（从节点）
    不懂23种设计模式？别灰心，这份核心笔记来帮你，你想知道的都在这里！
    jmeter学习之路知识点概括
    I/O 虚拟化技术 — VFIO
    PIL.Image、cv2的img、bytes相互转换
    componentone/activex-ui-controls-老树发新芽
    如何使用 Eolink 实现 API 文档自动生成
    【云原生 | 57】Docker三剑客之Docker Swarm֯使用其他服务发现后端
    Spring核心接口ObjectProvider
    C# 内存泄漏之 Internal 关键词代表什么？
  • 原文地址：https://blog.csdn.net/weixin_45804632/article/details/126738056