初识
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="lib/vue.js"></script>
</head>
<body>
<script>
// 一般直接运行会报两个错误 第一个下载vue 开发者工具，自行百度下载
// 第二条会报
// You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at https://vuejs.org/guide/deployment.html
// 所以 参考官方文档里的 资料 给一下配置就解决一下问题
Vue.config.productionTip = false // 取消生产环境下产生警告
</script>
</body>
</html>
Hello Vue 模板语法
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="lib/vue.js"></script>
</head>
<body>
<!-- 想让Vue 工作， 首先创建一个Vue实例 并且传入配置对象 -->
<!-- 然后为 Vue 实例 选择一个容器 root 容器里的代码必须符合 HTML 规范 只不过混入了 Vue 语法 -->
<!-- {{ value }} 花括号可以读取所有的 Vue实例 中的 data 的数据-->
<!-- 一旦 data 中的数据发生改变，页面中的数据也会自动发生改变 -->
<!-- 插值语法： -->
<!-- 1. 功能： 用来解析标签体内容 -->
<!-- 1. 语法： 可以写 js 的表达式 -->
<!-- 指令语法： -->
<!-- 2. 功能 解析标签 标签属性 标签内容 绑定事件 -->
<!-- 2. 语法 一般为 v-xxx 开头 -->
<div id="root">
<h1>Hello {{ name }}</h1>
<a v-bind:href="url">这是我的网站</a>
<a :href="school.url">这是我的个人博客</a>
</div>
<script>
// Vue.config.productionTip = false // 取消生产环境下的警告
new Vue({
el: '#root', // 用于指定当前 Vue 实例 为那个容器服务， 通常作为 css选择器
// el: document.getElementById('root') // 这样写也行呢
data: { // 用于提供数据，供 Vue 实例的容器所使用， 当前暂且写成一个对象
name: 'Vue',
url: 'https://www.baidu.com',
school: {
url: 'https://www.blog.cn'
}
}
})
// 注意 ：容器和实例一一对应
</script>
</body>
</html>
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
