目录
一、Vue概述：
Vue.js (vuejs.org)
https://cn.vuejs.org/
- 采用组件化模式，提高代码复用率，且让代码更好维护
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率
- 使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点
二、Vue Hello World 案例：
- 想让Vue工作，需要通过new关键字，创建Vue对象，且需要传入配置对象
- demo-div容器中，代码依旧符合HTML规范，只不过是混入了一些Vue的特殊语法·
- demo-div容器中的代码被称为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>Document</title>
<Script src="./vue.js"></Script>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
</script>
</head>
<body>
<div class="demo">
<h1>Hello {{name}} !</h1>
</div>
</body>
<script>
// 创建一个Vue脚本：
var vue_demo = new Vue({
el: '.demo', //el：用于指定当前Vue实例为哪个容器服务，值通常为css选择器
data: { //data：用于存储数据，数据供el所指定的容器去使用
name: "Vue"
}
});
</script>
</html>插值语法初识：
插值语法，使用{{data中所定义的key值}}，通过创建的Vue实例对象中的el key值定位HTML页面元素位置，在通过实例中的data key值中的value值渲染{{}}数据
容器和Vue实例是一一对应的！
三、模板语法：
1.插值语法：
- 用于解析标签体内容
- 语法：{{xxxx}} ，xxxx会作为js表达式解析
2.指令语法：
- 功能：解析标签体内容、绑定事件
- 举例：v-bind:href = “xxxx”，xxxx 会作为js表达式解析，可以简写为 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
</head>
<body>
<div id="root">
<h1>你好：{{name}}</h1>
<a v-bind:href="url">点击前往B站</a>
</div>
</body>
<!--引入Vue.js代码-->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成提示。
<!--创建一个Vue实例对象-->
new Vue({
//配置对象作为参数
el: "#root", //el：用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { //data：用于存储数据，数据供el所指定的容器去使用，暂时使用一个类
name: "krian",
url: "https://www.bilibili.com"
}
})
</script>
</html>四、指令语法-数据绑定：
Vue中有两种数据绑定方式：
- 单项绑定（
v-bind:）：数据只能从data流向页面 - 双向绑定（
v-model）：数据不仅能从data流向页面，还可以从页面流向data
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数据绑定</title>
</head>
<body>
<div id="root">
<div>单向数据绑定：<input type="text" v-bind:value="name1"></div>
<br>
<div>双向数据绑定：<input type="text" v-model:value="name2"></div>
</div>
</body>
<!--引入Vue.js代码-->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成提示。
<!--创建一个Vue实例对象-->
new Vue({
//配置对象作为参数
el: "#root", //el：用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { //data：用于存储数据，数据供el所指定的容器去使用，暂时使用一个类
name1: "krian",
name2: "krian"
}
});
</script>
</html>注意：
- 双向绑定一般应用在表单类元素上（有value值的元素）
v-model:value：可以简写为v-model，因为v-model默认收集的是value的值
v-model只能应用在表单类元素上（输入类元素）
五、el与data的两种写法：
1.el写法：
v.$mount('#root');：通过Vue实例挂载到指定的容器上
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数据绑定</title>
</head>
<body>
<div id="root">
我的名字：{{name}}
</div>
</body>
<!--引入Vue.js代码-->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成提示。
<!--创建一个Vue实例对象-->
const v = new Vue({
//配置对象作为参数
// el: "#root", //el：用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { //data：用于存储数据，数据供el所指定的容器去使用，暂时使用一个类
name: "krian"
}
});
//对数据进行挂在：
v.$mount('#root');
</script>
</html>- new Vue时候配置el属性
- 先创建Vue实例，随后通过
vm.$mount('选择器')指定el值
2.data写法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数据绑定</title>
</head>
<body>
<div id="root">
我的名字：{{name}}
</div>
</body>
<!--引入Vue.js代码-->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成提示。
<!--创建一个Vue实例对象-->
const v = new Vue({
//方式一：对象式写法：
// data: {
// name: "krian"
// }
//方式二：函数式写法：
//data不能使用=>函数声明
data: function () {
console.log(this) //此处的this是Vue实例对象
return {
name: "krian"
}
}
});
//对数据进行挂在：
v.$mount('#root');
</script>
</html>- 对象式
- 函数式
如何选择：目前哪种方法都可以，组件data必须使用函数式，否则会报错！
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
