VUE基本结构

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  {{ msg }}

  <div id="app">

    {{ msg }}

  </div>

</body>

<script src="vue.js"></script>

<script>

  new Vue({

    el: '#app', // 说明当前文件的哪一个节点的内部使用vue的语法 - element

    data: { // 当前实例的初始化的数据

      msg: 'hello world'

    }

  })

</script>

</html>

模板语法文本

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  {{ msg }}

  <div id="app">

    {{ msg }} - {{ count }} - {{ obj.num }} --- {{ arr[1] }}

  </div>

</body>

<script src="vue.js"></script>

<script>

  new Vue({

    el: '#app', // 说明当前文件的哪一个节点的内部使用vue的语法 - element

    data: { // 当前实例的初始化的数据

      msg: 'hello world',

      count: 1000,

      obj: {

        num: 30

      },

      arr: ['a', 'b', 'c']

    }

  })

</script>

</html>

模板语法纯html：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    {{ msg }}

    <div v-html="msg"></div>

    <div v-text="msg"></div>

  </div>

</body>

<script src="vue.js"></script>

<script>

  new Vue({

    el: '#app', // 说明当前文件的哪一个节点的内部使用vue的语法 - element

    data: { // 当前实例的初始化的数据

      msg: '<h1>hello world</h1>'

    }

  })

</script>

</html>

{{}} --- 原样输出变量的值



v-html -- 解析输出变量的值 ---- 指令




v-text -- 原样输出变量的值 ---- 等同于 {{ }} ---- 指令


**防止XSS,CSRF**


> XSS 跨站的脚本攻击 --- 输入框 提交的是一段 javascript 代码
  
  ---- 过滤关键词/转义关键词   ---   <script>  --- &lt;script>


> CSRF 跨站请求伪造 --- 用户访问可靠的网站A，登陆之后登陆信息存入了cookie，但是在没有退出的情况下，请求了不可靠的网站B，B就像用户发起一个请求，用户响应请求时，就把自己的登陆信息泄露给了B




表达式




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    {{ sex === 1 ? '男' : '女' }} - {{ lesson === 1 ? '一阶段' : lesson === 2 ? '二阶段' : '三阶段'}}

    - {{ msg.split('').reverse().join('') }}  --- {{ sex | sexFilter }}

  </div>

</body>

<script src="vue.js"></script>

<script>

  new Vue({

    el: '#app',

    data: {

      msg: 'hello world',

      sex: 1,

      lesson: 1

    },

    filters: { // 体验过滤器，使用用  | 分割    --   变量 | 过滤器名称

      sexFilter (val) {

        if (val === 1) {

          return '男'

        } else {

          return '女'

        }

      }

    }

  })

</script>

</html>
赞成使用三元（目）运算符，不赞成写其余的业务逻辑




指令




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    {{ msg }}

    <div v-if="flag">

      如果为真我就显示

    </div>

    <div v-else>

      如果为假我就显示

    </div>

    <div v-show="flag">

      真真真

    </div>

    <div v-show="!flag">

      假假假

    </div>

  </div>

</body>

<script src="vue.js"></script>

<script>

  new Vue({

    el: '#app',

    data: {

      msg: 'hello world',

      flag: true

    }

  })

</script>

</html>



> v-html 
> v-text
> v-model  一般和表单元素一起使用，表示的就是表单元素的值
> v-if     条件判断的指令  v-if   v-else-if  v-else
> v-show   显示的依据  ----  css  display:none/block
> v-for    循环遍历数据
> v-bind   绑定属性
> v-on     绑定事件
> v-once   只绑定一次
> v-slot
> v-pre
> v-cloak




**v-show 与 v-if 的区别**


 




绑定属性




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .activea {

      color: #f66

    }

    .activeb {

      color: bisque

    }

  </style>

</head>

<body>

  <div id="app">

    <div mymsg="msg">没有使用绑定属性</div>

    <div v-bind:mymsg="msg">使用绑定属性</div>

    <div :mymsg="msg">绑定属性的缩写形式</div>

    <div :class="activeVal">aaaaaaaaaa</div>

  </div>

</body>

<script src="vue.js"></script>

<script>

  new Vue({

    el: '#app',

    data: {

      msg: 'hello world',

      activeVal: 'activeb'

    }

  })

</script>

</html>


# 3、class与style绑定 --- 如果后端传递的数据有单独的样式需要设计，则可用




```
{
  title: '华为笔记本',
  className: 'active'
}




<div :class="item.className"></div>




{
  title: '华为笔记本',
  active: true
}




<div :class="{active: item.active}"></div>
```
## 3.1 class绑定 --- 07class绑定.html




> 对象写法
```
// css
.active { color: #f66 }
// html
<div id="app">
  <div class="active">HTML + css设置字体颜色</div>
  <input type="checkbox" v-model="flag"> 选中为真，不选中为假
  <div :class="{ active: flag }">根据选中的样式来设定颜色</div>
</div>
// js
new Vue({
  el: '#app',
  data: {
    flag: false
  }
})
```




> 数组写法
```
// css
.bgactive { background-color: #00f }
.fontactive { color: #fff }




// html
<div :class="[bg, font]">数组显示样式</div>




// js
new Vue({
  el: '#app',
  data: {
    flag: false,
    bg: 'bgactive', // ++++++++++++++++++
    font: 'fontactive' // ++++++++++++++++++
  }
  })
```


 




CLASS绑定




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .active { color: #f66 }

    .bgactive { background-color: #00f }

    .fontactive { color: #fff }

  </style>

</head>

<body>

  <div id="app">

    <div class="active">HTML + css设置字体颜色</div>

    <input type="checkbox" v-model="flag"> 选中为真，不选中为假

    <div :class="{ active: flag }">根据选中的样式来设定颜色</div>

    <div :class="[bg, font]">数组显示样式</div>

  </div>

</body>

<script src="vue.js"></script>

<script>

  new Vue({

    el: '#app',

    data: {

      flag: false,

      bg: 'bgactive',

      font: 'fontactive'

    }

  })

</script>

</html>




条件判断




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    <input type="radio" v-model="sex" value="1">男

    <input type="radio" v-model="sex" value="0">女

    <div v-if="sex == 1">男</div>

    <div v-else>女</div>

    <select v-model="lesson">

      <option value="1">一阶段</option>

      <option value="2">二阶段</option>

      <option value="3">三阶段</option>

    </select> {{ lesson }}

    <div v-if = "lesson == 1">一阶段</div>

    <div v-else-if = "lesson == 2">二阶段</div>

    <div v-else>三阶段</div>

  </div>

</body>

<script src="vue.js"></script>

<script>

  new Vue({

    el: '#app',

    data: {

      sex: 1,

      lesson: 3

    }

  })

</script>

</html>


v-if 可以和 key属性同时使用，可以避免 代码的重用




v-show css 显示和隐藏的转换


 




循环渲染




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    <!-- 不加key，末位添加  之前的会复用，如果首位删除，全部都修改了 -->

    <!-- <ul>

      <li v-for="item of list">{{ item }}</li>

    </ul> -->

    <!-- 如果添加key值，不管添加还是删除，都会复用 -->

    <!-- <ul>

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

    </ul> -->

    <ul>

      <li v-for="item of list1" :key="item.id">{{ item.title }}</li>

    </ul>

  </div>

</body>

<script src="vue.js"></script>

<script>

  var app = new Vue({

    el: '#app',

    data: {

      list: ['a', 'b', 'c', 'd'],

      list1: [

        {

          id: 'a',

          title: 'aa'

        },

        {

          id: 'b',

          title: 'bb'

        },

        {

          id: 'c',

          title: 'cc'

        }

      ]

    }

  })

</script>

</html>


**列表渲染要加 key 属性，如果不知道拿什么作为key值，可以使用索引值,最好是使用唯一的值作为key值**




> v-for = "item of list"
> v-for = "(item, index) of list"


 




事件处理




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    <mark>原生js onclick 必须得写函数的(),vue中可以不写</mark>

    <button onclick="jsBtnClick()">js原生按钮绑定点击事件</button>

    <button v-on:click="vueBtnClick()">vue按钮绑定点击事件</button>

    <mark>原生js需要事件对象必须传递事件对象,vue中不需要传递事件对象</mark>

    <button onclick="jsBtnClickEvent(event)">原生js事件对象</button>

    <button v-on:click="vueBtnClickEvent">vue按钮绑定点击事件</button>

    <mark>如果vue中需要传递参数和事件对象时，必须传入事件对象 $event</mark>

    <button v-on:click="vueClickParams($event, 1)">vue+事件对象+参数</button>

    <button @click="count += 1">{{ count }}</button>

  </div>

</body>

<script src="vue.js"></script>

<script>

  function jsBtnClick () {

    console.log('js原生事件')

  }

  function jsBtnClickEvent (event) {

    console.log(event)

  }

  new Vue({

    el: '#app',

    data: {

      count: 0

    },

    methods: { // vue中自定义事件的聚集地

      vueBtnClick () {

        console.log('vue点击事件')

      },

      vueBtnClickEvent (event) {

        console.log('vue', event)

      },

      vueClickParams (event, id) {

        console.log(id, event)

      }

    }

  })

</script>

</html>


v-on:click @click


v-on:change @change


v-on:click="fn()"


v-on:click="fn($event)"


v-on:click="fn('params')


v-on:click="fn(msg)" msg为变量


 




修饰符




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .box {

      width: 200px;height: 200px; background-color: #f66

    }

  </style>

</head>

<body>

  <div id="app">

    <input type="text" onkeyup="getData(event)" id="val">

    <!-- <input type="text" @keyup="getDataVue" v-model='vl'> -->

    <h1>.enter 按键修饰符</h1>

    <input type="text" @keyup.enter="getDataVue" v-model='vl'>

    <h1> .stop .prevent 事件修饰符</h1>

    <div class="box" onclick="clickjsbox()">

      <button onclick="clickjs(event)">js按钮</button>

    </div>

    <div class="box" @click="clickvuebox()">

      <button @click.stop.prevent="clickvue">vue按钮</button>

    </div>

  </div>

</body>

<script src="vue.js"></script>

<script>

 // 当按下 enter 键时。输出输入框中的值  ---- js

 function getData (event) {

   if (event.keyCode === 13) {

     console.log(document.getElementById('val').value)

   }

 }

 function clickjsbox () {

   console.log('box')

 }

 function clickjs (event) {

   event.stopPropagation()

   console.log('js')

 }

 new Vue({

  el: '#app',

  data: {

    vl: ''

  },

  methods: {

    // getDataVue (event) {

    //   if (event.keyCode === 13) {

    //     console.log(this.vl)

    //   }

    // }

    getDataVue () {

      console.log(this.vl)

    },

    clickvuebox () {

      console.log('box')

    },

    clickvue() {

      console.log('vue')

    }

  }

})

</script>

</html>

事件修饰符号：


阻止冒泡 v-on:click.stop="fn()"


阻止默认事件 v-on:click.prevent="fn"


阻止冒泡阻止默认事件 v-on:click.stop.prevent="fn"


.capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理


.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的


.once 点击事件将只会触发一次


.passive 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告


按键修饰符：


以前如果有一个表单输入框，当你输入之后敲回车想要打印值


<input onchange="fn(event)" id="name" />


if (event.keyCode === 13) {name.value}


vue


<input @change.enter="fn()" id="name" />


.tab


.delete


.esc


.space


.up


.down


.left


.right


系统修饰符


　　.ctrl


　　.alt


　　.shift


　　.meta


 


												


											
VUE基本写法的更多相关文章
	

    
						
  1. vue-property-decorator vue typescript写法
		
    什么是Typescript TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集,扩展了 JavaScript 的语法.作者是安德斯大爷, Delphi ...
    
		
    2. 
						
  2. Vue 插件写法
		
    都说Vue2简单,上手容易,但小马过河,自己试了才晓得,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前随便拿全局变量和修改dom的锤子不能用了,变换到关注数据本身.vue的 ...
    
		
    3. 
						
  3. 关于Vue脚手架写法的问题
		
    问题描述: main.js import Vue from 'vue' import App from './App' /* eslint-disable no-new */ new Vue({ el ...
    
		
    4. 
						
  4. VUE常用写法
		
    v-for: v-for ='item,key of data' v-for ='item,index in data'     @click='' @click='pop.show=false'   ...
    
		
    5. 
						
  5. vue语法之拼接字符串
		
    先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...
    
		
    6. 
						
  6. 不借助vue-cli，自行构建一个vue项目
		
    前言: 对于刚刚接触vue的同学来说,直接用官方的构建工具vue-cli来生成一个项目结构会存在一些疑惑,比如:   .vue组件 为什么可以写成三段式(tempalte.script.style)? ...
    
		
    7. 
						
  7. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架（下篇——多页面VueSSR+热更新Server）
		
    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...
    
		
    8. 
						
  8. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战：异步实现数据双端渲染
		
    回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...
    
		
    9. 
						
  9. Vue学习之路---No.3（分享心得，欢迎批评指正）
		
    同样的,我们先来回顾一下昨天学习的内容: 1.利用v-once来组织双向绑定 2.filter{}过滤器的使用(详情请看上一章) 3.computed(计算属性),利用computed属性实现filt ...
    
		
    10. 
						
  10. vue原理简介
		
    写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. std::unique_ptr release的使用
			
    在c++中,动态内存管理是通过new/delete 运算符来进行的.由于确保在正确的时间释放内存是很困难的,为了避免内存泄漏,更加容易,安全地使用动态内存,C++11标准库提供了两种智能指针类型来管理 ...
    
			
    2. 
						
  2. VirtualBox_Ubuntu22.10_Terminal无法打开
			
    https://blog.csdn.net/weixin_43959807/article/details/128872860
    
			
    3. 
						
  3. AX2012 data() 和 buf2buf()的区别
			
    data() 和 buf2buf()都是AX2012 里面可以选择使用的数据拷贝函数.不同的是data会拷贝原始记录里面的所有字段,包括系统字段(公司,创建人等).而buf2buf在拷贝数据时则不会拷 ...
    
			
    4. 
						
  4. 【APT】Patchwork APT组织针对巴基斯坦国防官员攻击活动分析
			
    前言 Patchwork(白象.摩诃草.APT-C-09.Dropping Elephant)是一个疑似具有印度国家背景的APT组织,该组织长期针对中国.巴基斯坦等南亚地区国家进行网络攻击窃密活动.本 ...
    
			
    5. 
						
  5. What is the Best Python IDE for Data Science?
			
    Created by Guido van Rossum, Python was first released back in 1991. The interpreted high-level prog ...
    
			
    6. 
						
  6. 用python提取txt文件中的特定信息并写入Excel
			
    这个是用 excel里面的 去掉空格最后导出的一个list: 原本是有空格的 后面是抵消了中间的空格. 然后 这里侧重说一下什么是split()函数 语法:str.split(str="&q ...
    
			
    7. 
						
  7. CAD2023卸载方法，如何完全彻底卸载删除清理干净cad各种残留注册表和文件？【转载】
			
    cad2023卸载重新安装方法,使用清理卸载工具箱完全彻底删除干净cad2023各种残留注册表和文件.cad2023显示已安装或者报错出现提示安装未完成某些产品无法安装的问题,怎么完全彻底删除清理干净 ...
    
			
    8. 
						
  8. 自学JavaDay02_class02
			
    注释 单行注释: //单行注释 多行注释 /** 多行注释* 多行注释* */ 文档注释 /** * 文档注释 * 文档注释 */ 标识符 关键字 标识符 所有的标识符都应该以字母(A-Z 或者 a- ...
    
			
    9. 
						
  9. sqlite bundle 的含义，和 sqlite.dll, SQLite.Interop.dll, System.Data.SQLite.dll 三者之间的关系
			
    sqlite bundle 的含义,和 sqlite.dll, SQLite.Interop.dll, System.Data.SQLite.dll 三者之间的关系. bundle 表示不需要配合 S ...
    
			
    10. 
						
  10. termux搭建服务器方式
			
    pkg install vim apt update 安装debian系统apt install proot-distroproot-distro install debianproot-distro ...
    
			
    11.