Vue学习笔记，一
目录
Vue是一套用于构建用户界面的渐进式框架。
Vue的数据渲染
- 第一步：引入Vue文件
- CMD进入当前工程的文件夹
- npm init -y 生成package.json文件
- npm i vue 加载Vue包
- 在HTML文件中引用Vue.js
<script src="node_modules/vue/dist/vue.min.js"></script> - 第二步：创建一个vue实例(对象)，这个实例用来管理html代码
var vm = new Vue(); - 第三步：对象中的el属性，用来指定需要管理的范围，值需要一个标签的id
var vm = new Vue({ el:"#root", }) - 第四步：对象中的data属性，用来保存页面需要用到的数据
var vm = new Vue({ el:"#root", data:{ msg:"Hello" } }) - 第五步：将data中的数据绑定到页面上，在{{}}中写data的属性名即可
<div > <p>{{ msg }} vue !!</p> </div> <!-- 不在vue的管辖范围内，不会渲染数据 --> <p>{{ msg }} vue !!</p>
Vue的插值表达式
<!-- 不多bb 是什么玩意自己领会 -->
<div >
<h1>{{ userName }}</h1>
<h1>{{ userName + "搬家"}}</h1>
<h1>{{ age + 1 }}</h1>
<h1>{{ age > 18 ? "成年" : "未成年" }}</h1>
<h1>{{ userName.split("").reverse().join("") }}</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
userName:"xxx",
age:18,
}
})
</script>
Vue的基础指令
v-text
- v-text的值可以设置表达式，与差值表达式相同
- v-text会替换掉标签的内容
<div >
<!-- 这个显示的是小明 -->
<h1 v-text="userName"></h1>
<!-- 这个显示的也是小明 -->
<h1 v-text="userName">~~~~~~~~~~</h1>
<!-- 使用v-text不会让浏览器渲染标签 -->
<div v-text="htmlStr"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userName:"小明"
htmlStr:"<h2>吵架</h>"
}
})
</script>
v-html
- v-html可以在HTML页面上渲染标签
- 但是v-html使用不安全，一般很少用
<div >
<!-- 这里显示的是h2标签的 “吵架” -->
<div v-html="htmlStr"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
htmlStr:"<h2>吵架</h>"
}
})
</script>
v-bind
- v-bind 可以给标签动态绑定属性
<div >
<!-- 给img标签添加src地址 -->
<img v-bind:src="imgSrc" alt="">
<!-- 简写 -->
<img :src="imgSrc" alt="">
<!-- 给a标签添加href地址 -->
<a :href="theHref">Vue官网</a>
<!-- a标签地址的字符串拼接 -->
<a :href="'delete.php?>删除</a>
<!-- ES6的模板字符串 这样写也行 -->
<a :href="'delete.php?">删除</a>
<!-- {red:flag} red是类名 flag为true时该标签设置这个类名 -->
<p :class="{red:flag}">中午吃啥</p>
<p :class="{red:age == 18}">中午吃啥</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
imgSrc:"https://cn.vuejs.org/images/logo.png",
theId:111,
theHref:"https://cn.vuejs.org/v2/api/#v-text",
flag:true,
age:1
}
})
</script>
v-for
- v-for 遍历数组、json元素用
<div >
<ul>
<!-- item 数组中的每一项 list data中的数组 -->
<li v-for="item in list" :key="item.id">{{ item.id }}:{{ item.name }}</li>
</ul>
<ul>
<!-- item 数组中的每一项 index数组的下标 -->
<li v-for="(item,index) in list" :key="index">
{{ index }} : {{ item.name }}
</li>
</ul>
<ul>
<li v-for="value in user" :key="value">
{{ value }}
</li>
</ul>
<ul>
<li v-for="(value,key,index) in user">
{{ key }} : {{ value }} ------- {{ index }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"xxx"},
{id:2,name:"zzz"},
{id:3,name:"ccc"}
],
user:{name:"vvv",age:20}
}
})
</script>
v-model
- v-model 可实现数据双向绑定，这个指令只能给input、textarea、select使用
<div >
<input type="text" v-model="msg" >
<input type="text" :value="msg" >
<h1>{{ msg }}</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"Hello Vue"
}
})
</script>
v-on
- v-on 绑定事件
<!-- 点击事件绑定 -->
<div v-on:click="changeName">点击改变name</div>
<!-- 这个是简写 -->
<button @click="changeName">点击改变name</button>
<!-- 函数传参 -->
<button @click="abc('ccc')">传参</button>
<!-- 获取时间对象 -->
<button @click="getEvent($event)">获取事件对象</button>
<!-- 事件修饰符-阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="baidu">百度一下</a>
<!-- 按键修饰符 -->
<!-- 按回车键响应 -->
<input type="text" v-model="name" @keyDown.enter="submit">
<!-- 按65号键响应 -->
<input type="text" v-model="name" @keyDown.65="submit">
<!-- methods中的点击事件中的this 指的是 新建的Vue对象 -->
<script>
var vm = new Vue({
el:"#app",
data:{
name:"xxxx"
},
methods: {
changeName(){
console.log(this === vm);
this.name = "zzz";
},
abc(newName) {
this.name = newName;
},
getEvent(e) {
console.log(e);
},
baidu() {
console.log("百度一下");
},
submit() {
alert("点击回车");
}
},
})
</script>
v-if
- v-if 根据条件创建标签
<div >
<!-- 只显示第一个p标签 -->
<p v-if="age >= 18">已成年</p>
<p v-if="age < 18">未成年</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
age:18,
}
})
</script>
v-show
- v-show 标签全部创建 但是根据条件显示
<div >
<!-- 标签都创建，只显示第一个p标签，第二个隐藏display -->
<p v-show="age >= 18">已成年</p>
<p v-show="age < 18">未成年</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
age:18,
}
})
</script>