本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
Vue学习笔记(第一天)
初识Vue
初识Vue总结：
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
- root容器里的代码被称为【Vue模板】
- Vue实例和容器是一一对应的
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{xxx}} 中的xxx要写成js表达式，且xxx可以自动读取到data中的所有属性
- 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新 示例参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识Vue</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>你好{{name}}，我在{{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//阻止vue启动时生成生产提示
//创建vue实例
new Vue({
el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { //data中用于存储数据，数据供el所指定的容器去使用,值我们暂时先写成一个对象
name: '同学',
address: "北京"
},
})
</script>
</body>
</html>
Vue 模板语法
Vue 模板语法总结：
Vue 模板语法有2大类
- 插值语法：
- 功能：用于解析标签体内容
- 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
- 指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）
- 举例：v-bind:href="xxx" 或简写为 :href="xxx", xxx同样要写成js表达式
示例参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue模板语法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">点我去学习1</a>
<a :href="url">点我去学习2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//阻止vue启动时生成生产提示
//创建vue实例
new Vue({
el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { //data中用于存储数据，数据供el所指定的容器去使用,值我们暂时先写成一个对象
name: 'jack',
url: 'http://www.atguigu.com',
school: {
name: "tao"
}
},
})
</script>
</body>
</html>
数据绑定
Vue中有2种数据绑定的方式：
- 单向绑定（v-bind）：数据只能从data流向页面
- 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
- 双向绑定一般都应用在表单类元素上（如：input、select等）
- v-model:value 可以简写为v-model,因为v-model默认收集的是value值
- v-model只能应用在表单类元素（输入类元素）上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- 普通写法 -->
<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name"> -->
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name">
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//阻止vue启动时生成生产提示
//创建vue实例
new Vue({
el: '#root',
data: {
name: '尚硅谷'
},
})
</script>
</body>
</html>
el与data的两种写法
data与el的2种写法：
-
el有两种写法
（1）new Vue时配置el属性 （2）先创建Vue实例，随后再通过vm.$mount('#root')指定el的值 -
data有两种写法 （1）对象式 （2）函数式
如何选择：目前哪种都可以，以后学到组件时，data必须使用函数式，否则会报错 -
一个重要原则
由Vue管理的函数，一定不要写成箭头函数，一旦写了箭头函数，this就不再是Vue实例了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el与data的两种写法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//阻止vue启动时生成生产提示
//el的两种写法
/* const v = new Vue({
el: '#root', //第一种写法
data: {
name: '尚硅谷'
},
})
console.log(v)
v.$mount('#root') //第二种写法 */
new Vue({
el: "#root",
//data的第一种写法
/* data: {
name: '尚硅谷'
}, */
//data的第二种写法：函数式
data() {
return {
name: '尚硅谷'
}
}
})
</script>
</body>
</html>
MVVM模型
M：模型：对应data中的数据
V：试图：模板
VM：视图模型：Vue实例对象
观察发现
1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性 及 Vue原型上所有属性，在vue模板中都能直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVVM</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>学校名称：{{name}}</h1>
<h1>地址：{{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//阻止vue启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
name: "尚硅谷",
address: '北京'
}
})
console.log(vm)
</script>
</body>
</html>
