前言:
本文主要讲一下vue基本语法，！
这里可以直接看他的语雀笔记Vue核心 Vue简介 初识 · 语雀 (yuque.com)
啊啊啊，他写得太好了， 建议直接看他的， 如果你愿意多看看我， 就都看吧。
vue简介及环境建设：
若建议不要使用管理员cmd
选择器类别小贴士
vue相关前端配置
引入vue包或下载：
//开发版: <!-- 开发环境版，包括有帮助的命令警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //生产版： <!-- 生产环境版优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> //通过相对路径引入: <script src="./js/vue.js"></script> vue基本介绍:
想让Vue工作必须创造Vue例子，并将配置对象输入
root 容器中的代码仍然一致html规范，只是混合了一些特殊的Vue语法
root 容器中的代码被称为Vue模板
Vue 实例与容器一一对应
只有一个真正的发展Vue例子将与组件一起使用
{ {xxx}}中的 xxx 要写 js 表达式，且 xxx 可自动读取data所有属性
一旦data如果数据在模板中发生变化，数据将自动更新
注意区分：js 表达式 和 js代码(语句)
js表达式:表达式会产生一个值，可以放在任何需要值的地方 a a b demo(1) x === y ? 'a' : 'b' js代码(语句) if(){
} for(){
} 第一个简单的vue程序:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>初识Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="demo">
<h1>Hello，{
{ name.toUpperCase() }}，{
{ address }}</h1>
</div>
<script type="text/javascript" > Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 // 创建Vue实例 new Vue({
el: '#demo', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data: {
// data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象 name: 'cess', address: '成都' } }) </script>
</body>
</html>
常用指令:
v-test和v-html:
当我们网速很慢或者javascript出错时，会显示{undefined{xxx}}；Vue提供的v-text、v-html可以解决这个问题；
v-test
<!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>v-text指令</title>
</head>
<body>
<div id="app">
<!--字符串的拼接依旧是加号-->
<h2 v-text="message+'!'">成都</h2>
<h2 v-text="info+'!'">成都</h2><!--v-text一定会替换掉内部的默认值-->
<h2>{
{ message +'!'}}--成都</h2><!--这里深圳没被替换, 因为这里用了两个大括号, 只是具备替换-->
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> var app = new Vue({
el:"#app", data:{
message:"兴趣使然的小小!!!", info:"计算机学院" } }) </script>
</body>
</html>
v-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>v-html指令</title>
</head>
<body>
<div id="app">
<!--html结构-->
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> var app = new Vue({
el:"#app", data:{
content:"兴趣使然的小小", content:"<a href='https://ladfeng.top'>兴趣使然的小小</a>" } }) </script>
</body>
</html>
(事件监听)v-on:
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码；
@为v-on的缩写!
@click为v-on:click
@dblclick为v-on:dblclick
一些按键事件@keydown和@keyup
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>键盘事件</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎打开{ {name}}笔记</h2> <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><br/> <input type="text" placeholder="按下tab提示输入" @keydown.tab="showInfo"><br/> <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"><br/> </div> <script type="text/javascript"> Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。 Vue.config.keyCodes.huiche = 13 // 定义了一个别名按键 new Vue({ el: '#root', data: { name: 'cess' }, methods: { showInfo(e) { // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script> </body> </html>
使用v-on:xxx或@xxx绑定事件，其中 xxx 是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数，否则 this 就不是vm了
methods中配置的函数，都是被 Vue所管理的函数，this 的指向是vm或组件实例对象
@click="demo"和@click="demo($event)"效果一致，但后者可以传参
demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件的基本使用</title>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来看{
{name}}的笔记</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
<script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({
el: '#root', data: {
name: '小小', }, methods: {
showInfo1(event) {
console.log(event.target.innerText) // console.log(this) // 此处的this是vm alert('同学你好！') }, showInfo2(event, number) {
console.log(event, number) console.log(event.target.innerText) // console.log(this) // 此处的this是vm alert('同学你好！！'+number) } } }) </script>
</body>
</html>
更多的事件处理Vue核心 事件处理 · 语雀 (yuque.com)
demo3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件修饰符</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style> * {
margin-top: 20px;} .demo1 {
height: 50px;background-color: skyblue;} .box1 {
padding: 5px;background-color: skyblue;} .box2 {
padding: 5px;background-color: white;} .list {
width: 200px;height: 200px;background-color: skyblue;overflow: auto;} li {
height: 100px;} </style>
</head>
<body>
<div id="root">
<h2>欢迎来到{
{ name }}学习</h2>
<!-- 阻止默认事件（常用） -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!-- 修饰符可以连续写 -->
<!-- <a href="http://www.qq.com" @click.prevent.stop="showInfo">点我提示</a> -->
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时才触发事件； -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<!-- scroll是滚动条滚动，passsive没有影响 -->
<!-- wheel是鼠标滚轮滚动，passive有影响 -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript"> Vue.config.productionTip = false new Vue({
el: '#root', data: {
name: '尚硅谷' }, methods: {
showInfo(e) {
alert('同学你好！') // console.log(e.target) }, showMsg(msg) {
console.log(msg) }, demo() {
for (let i = 0; i < 100000; i++) {
console.log('#') } console.log('累坏了') } } }) </script>
</body>
</html>
(数据绑定)v-model:
Vue中有两种的方式:
- 单向绑定
v-bind数据只能从data流向页面 - 双向绑定
v-model数据不仅能从data流向页面, 还可以从页面流向data
获取和设置表单元素的值(双向数据绑定)
demo1:
<!DOCTYPE html