前端之vue模板
vue模板初始VueVue实例模板语法1.vue指令：2.插值语法初始Vue初识Vue:1,想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;2,root容器里的代码依然符合html规范，贝不过混入了一些特殊的Vue语法;3,root容器里的代码被称为[Vue模板]，template。Vue实例el为Vue实例选择容器一个Vue实例只能接管一个容器，反之亦然。即，只能一一对应。数据改
初始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
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)