<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>创建vue实例对象</title>
<!-- 第一种引入方式：直接引入 -->
<script src="./vue.js"></script>
<!-- 第二种引入方式：引入在线地址（推荐这种） -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!-- 第三种：npm创建项目化方式 -->
</head>
<body>
<!-- 前端页面 -->
<div id="app">
<!-- 引用data中定义的num变量 -->
<!-- {{ 要引用的变量名 }} -->
<input type="text"><button>{{txt}}</button>
<br>
<!-- {{ }} ：胡子语法，不单止可以引用变量，还可以在里面写 JavaScript 的语法语句 -->
比较 num1={{num1}} 和 num2={{num2}} 哪个值更大? ——>{{ num1 > num2?"num1":"num2" }}
</div>
<!-- 后端数据库 -->
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
// 学习vue所有的数据都是通过“变量”方式来定义
// 每绑定一个标签，就需要写多一个 new Vue({...}) 实例对象来绑定
new Vue({
// el：element 对象，通过id来绑定指定的元素,值通常为css选择器字符串
// 第一种写法
// el:document.getElementById("app"),
// 第二种写法:推荐这种写法
el: "#app",
// data：绑定的元素中所有数据都定义在data里面
data: {
num1: 10,
num2: 20,
txt: "搜索"
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
