【初识vue以及简单指令】
初识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>
<div id="app">
<div>+</div>
<span>{{ count }}</span>
<div>{{frined.name}}</div>
<!-- 可以实现动态标签 -->
<div v-html="msg">链接</div>
<!-- v-show和v-if区别展示 -->
<div v-show="flag">v-show</div>
<div v-if="flag">v-if</div>
<p v-if="score>90">a等级</p>
<p v-else-if="score>80">b等级</p>
<p v-else-if="score>70">c等级</p>
<button v-on:click="count=count+2">按钮</button>
<button @click="count=count+2">按钮</button>
<button @click="add(2)">带参数的</button>
<button @click="fn">切换显示按钮</button>
<h2 v-if="flag">例子</h2>
<img v-bind:src="imgurl" v-bind:title="mag" alt="">
<img :src="imgurl" :title="mag" alt="">
<button v-if="index > 0" @click="index--">上一页</button>
<img src="list[index]" alt="">
<button v-if="index< list.length-1" @click="index++">下一页</button>
<ul>
<li v-for="(item,index) in list2"> {{item}} </li>
</ul>
<ul>
<li v-for="(item,index) in booklist" :key="item.id">
<span>{{ item.name }}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>
账户：<input type="text" v-modal="username"><br><br>
密码：<input type="password" v-modal="password"><br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js">//在线的vue链接</script>
<script>
// 什么是vue？
// vue是一个用于构建用户界面的渐进式框架，基于数据渲染
// vue核心包开发：局部模块改造
// vue核心包&vue插件工程化开发：整站开发
//创建vue实例，初始化渲染
// 1.准备容器
// 2.引包
// 3.创建实例
// 4.添加配置项=>完成渲染
const app=new Vue({//引入vuejs核心包，就全局环境，就有了vue构造函数
el:'#app',
data:{
msg:`<a href="网址">黑马程序员</a>`,//实现动态标签
count:100,
friend: {
name:20
},
flag:false,
score:85,
imgurl:'./imgs/10.png',
mag:'你好呀',
index:0,
list:[
'./imgs/10.png',
'./imgs/9.png',
'./imgs/8.png',
],
list2:['苹果','西瓜'],
booklist:[
{id:1,name:'红楼梦'},
{id:1,name:'红楼梦'}
],
username:'',
password:''
},
methods:{
add(a){
a++
},
fn(){
this.flag=!this.flag
},
del(id){
this.booklist=this.booklist.filter(item=>item.id=!id)
},
login(){
console.log(this.username,this.password)
},
reset(){
this.username='',
this.password=''
}
}
})
//插值表达式：{{}}
// 响应式数据
// 1.访问数据 实例.属性名
// 2.修改数据 实例.属性名=新值
//vue指令
// 带有v-前缀的特殊标签属性
// v-html：作用设置元素的innerHTml，语法：v-html=“表达式”，实现动态标签
//v-show和v-if
// 作用都是控制元素的显示隐藏
// 语法：v-show/if=“表达式”，表达式的值为true显示，false隐藏
// 区别：v-show：切换css的display：none来控制显示隐藏;频繁切换隐藏的场景
// v-if：根据判断条件控制元素的创建和移除（条件渲染）；不频繁切换隐藏的场景
//v-else和v-else-if：必须搭配这v-if来使用
// v-on:
// v-on:这个可以简写成@
// 作用：注册事件=添加监听+提供处理逻辑
// 语法：1.v-on：事件名=“内联语句”
// 2.v-on:事件名=“methods中的函数名”
//v-bind
// 作用：动态的设置html的标签属性---scr、url、title
// 语法：v-bind：属性名=“表达式”
// 其中v-bind可以省略
// v-for:
// 作用：基于数据循环，多次渲染整个元素->数组、对象、数字
// 方法：v-for="(item,index) in 数组"
// key
// 语法：:key="唯一标识"
// 作用：给列表项添加唯一标识。便于Vue进行列表项进行正确排序复用
// 默认行为会尝试：原地修改元素（就地复用）
// v-modal:
// 作用：给表单元素使用，双向数据绑定->可以快速获取或表单元素内容
// 数据变化->视图自动更新
// 视图变化->数据自动更新
// 语法：v-modal='变量'
</script>
</body>
</html>