初始Vue
初识Vue:
1,想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2,root容器里的代码依然符合html规范,贝不过混入了一些特殊的Vue语法;
3,root容器里的代码被称为[Vue模板],template。
Vue实例
el
为Vue实例选择容器
一个Vue实例只能接管一个容器,反之亦然。即,只能一一对应。
数据改变,页面会自动更新
Vue实例内包含的el
用于指定当前Vue实例容器服务的容器,值通常是css选择器字符串(包含不限于id、class选择器)。
在对应容器中使用{{插入内容}}
.插入内容,内容是js表达式(会生成一个值)。
<!--
* @LastEditors: 一只爱吃萝卜的小兔子
* @Date: 2022-04-18 21:59:22
* @LastEditTime: 2022-04-18 21:59:22
* @FilePath: \vuejs-learn\vue-start\hello-world.html
-->
<!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>
<!--可以在收藏夹中显示出图标-->
<link
rel="Bookmark" type="image/x-icon" href="../favicon.svg"/>
<!--可以在地址栏中显示出图标-->
<link rel="icon" type="image/x-icon" href="../favicon.svg"/>
<link
rel="shortcut icon" href="../favicon.svg">
<!-- 引入vue -->
<script src="../vuejs/vue.js"></script>
</head>
<body>
<!-- --------------------------------------------------
Vue实例对应的容器 -->
<div id="root">
<h1>你好!
{{name}}</h1>
</div>
<script>
// 阻止 vue 启动时生成 产生提示
Vue.config.productionTip = false;
// --------------------------------------------------
// 创建Vue实例
new Vue({
el: '#root', // 为当前Vue实例指定服务容器
data() { // data 存储数据,为el指定容器提供数据
return {name: 'World'}
}
});
</script>
</body>
</html>
模板语法
1.vue指令:
用于标签属性
v-bind 动态绑定标签属性,id,……
v-bind:属性=“表达式”,v-开头的指令中,等号后方的引号内是表达式
v-on 绑定事件和方法,添加事件监听器
v-model 输入与返回数据的双向绑定
v-if 根据条件是否显示元素,用于Vue 插入/更新/移除元素时自动应用过渡效果。
v-for 渲染项目列表
2.插值语法
位于模板标签内容
可以读取data()
内的所有内容,可以读取 Vue 实例上的所有内容,可以读取 Vue 原型上的上的所有内容
{{ js表达式 }} ,将指定内容放到指定位置。
<!--
* @LastEditors: 一只爱吃萝卜的小兔子
* @Date : 2022-04-19 09: 15: 22
* @LastEditTime: 2022-04-19 09:46:16
* @FilePath: \vuejs-learn\vue-start\vue-template-syntax.html
*
* 1.v-bind用于动态绑定标签属性,可以简写为冒号
* 2.插值语法 {{ 表达式 }} 用于标签内容,可以使用所有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>模板语法</title>
<!--可以在收藏夹中显示出图标-->
<link rel="Bookmark" type="image/x-icon" href="../favicon.svg" />
<!--可以在地址栏中显示出图标-->
<link rel="icon" type="image/x-icon" href="../favicon.svg" />
<link rel="shortcut icon" href="../favicon.svg">
<!-- 引入vue -->
<script src="../vuejs/vue.js"></script>
</head>
<body>
<div id="root">
<h1>你好!{{name}}</h1>
<h2>欢迎来到{{school.name}},点击
<a :href="school.url" target="_blank" rel="noopener noreferrer">链接学习{{school.course}}.</a>
</h2>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data() {
return {
name: 'Amy',
school: {
name: '我要自学网',
course: 'ps',
url: 'https://www.51zxw.net/'
}
}
}
});
</script>
</body>
</html>
下一节:前端之vue数据绑定与MVVM