初识vue
1.1vue特点
- 采用组件化模式，提高代码复用率、且让代码更好维护
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
1.2vue安装教程
vue官网：https://cn.vuejs.org
1.3Hello World
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
- root容器里的代码依然符合html规范，只不过混入了一i邪恶特殊的Vue语法。
- root容器里的代码被称为vue模板。
- Vue实例和容器是一一对应的
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
- 一旦data中的数据发生改变，那么模板中用到改数据的地方也会自动更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>Hello World,{{name}}</h1>
</div>
<script>
Vue.config.productionTip = false; // 组织vue在启动时生成生产提示
// 创建vue实例
const x = new Vue({
el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
data:{
name:'张三'
}
})
</script>
</body>
</html>
模板语法
插值语法
- 用于解析标签体内容
- {{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
指令语法
- 用于解析标签（包括：标签属性、标签体内容、绑定事件....）
- v-bind:herf="xxx" 或简写 :href="xxx"，xxx同样是写js表达式，且可以直接读取到data中的所有属性。
- vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h1>Hello World,{{name}}</h1>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()">点我进百度</a>
<a :href="school.url">百度</a>
</div>
<script>
Vue.config.productionTip = false; // 组织vue在启动时生成生产提示
// 创建vue实例
const x = new Vue({
el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
data:{
name:'张三',
school:{
url:"https://www.baidu.com"
},
}
})
</script>
</body>
</html>
数据绑定
单项数据绑定
- 使用v-bind绑定，数据只能从data流向页面
双向数据绑定
- 使用v-model绑定，数据不仅能从data流向页面，还可以从页面流向data。双向数据绑定一半都应用在表单类元素上（如：input、select等）。v-model:value 可以简写为v-model,因为v-model默认收集的就是value值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name">
<!-- v-model只能应用于表单输入类 -->
双向数据绑定：<input type="text" v-model:value="name">
<!-- 简写方式 -->
单向数据绑定：<input type="text" :value="name">
<!-- v-model只能应用于表单输入类 -->
双向数据绑定：<input type="text" v-model="name">
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:"张三"
}
})
</script>
</html>
el和data的两种写法
-
el的两种写法
- new Vue的时候配置el属性。
- 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
-
data的两种写法
-
对象式
-
函数式
目前哪种写法都可以，以后学到组件时，data必须使用函数式，否则会报错。
-
-
由于Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是Vue实例了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el和data的两种写法</title>
<script src="../vuejs/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello,{{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false;
// const v = new Vue({
// // el:'#root', //第一种写法
// data: {
// name:"张三"
// },
// })
// v.$mount('#root') // 第二种写法
const v = new Vue({
el:'#root',
// data的第一种写法：对象式
// data: {
// name:"张三"
// },
// data的第二种写法：函数式
// data: function(){
// console.log("@@@",this) // 此处的this是Vue实例对象
// return{
// name:"张三"
// }
// },
// data的第二种写法：函数式，简写方式
data(){
console.log("@@@",this) // 此处的this是Vue实例对象
return{
name:"张三"
}
},
// data的第二种写法：函数式，简写方式,不使用箭头函数
// data:()=>{
// console.log("@@@",this) // 此处的this是Window实例对象，因为箭头函数没有自己的this，所以要向外层找。
// return{
// name:"张三"
// }
// },
})
</script>
</html>