Vue学习——初识Vue
程序员文章站
2022-03-28 15:56:34
...
一、搭建Vue运行环境
- 下载vue.js文件
Vue下载地址 - 在代码中引入下载好的vue.js
<script src="../js/vue.js"></script>
- 清理浏览器中不必要的提醒（选做）
- 在浏览器中安装Vue开发者工具，清理第一个
- 在代码中设置生产提示
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
二、Hello,Vue
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
<script>
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
// 创建一个Vue实例
new Vue({
el: '#root', //el用来指定当前Vue实例为哪个容器服务，通常值为css选择器
data: { //data中存放数据，数据供el容器使用
name: 'Vue'
}
})
</script>
</body>
总结：
- 想让Vue工作，必须创建一个Vue实例，且要传入一个配置对象。
- root容器里的代码依然符合HTML规范，只是在其中混入了一些Vue语法。
- root容器中的代码被称为【Vue模板】
- Vue实例与容器是一一对应的
- 真实开发中只有一个Vue实例，并且要配合着组件一起使用
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中所有的属性
- 一旦data中的数据发生变化，那么页面中所有用到数据的地方会自动更新
el和data的两种写法：
el两种写法：
- el: ‘#root’
- vm.$mount(’#root’)
//el的两种写法
// new Vue({
// el: '#root',
// data: {
// name: 'rose'
// }
// })
const v = new Vue({
data: {
name: 'rose'
}
})
v.$mount('#root')
data两种写法：
- 对象式
- 函数式
// data的两种写法
// const v = new Vue({
// el: '#root',
// data: {
// name: 'rose'
// }
// })
const v = new Vue({
el: '#root',
data: function(){
return {
name: 'rose'
}
}
})
下一篇： 21 款超棒的 CSS3 效果