英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/
Vue下载:https://v2.cn.vuejs.org/v2/guide/installation.html
往下会看到下载地址,有两个选项:
在使用 Vue 时,推荐在浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
下载地址:https://v2.cn.vuejs.org/v2/guide/installation.html#Vue-Devtools
点击Vue Devtools会跳到 GitHub
如果进不了
链接:https://pan.baidu.com/s/1ENE2x1_IRoJekbLfquqfCw
提取码:hp6v
下载完之后,打开你浏览器的扩展管理,把它拉进去,就会提示你安装
点击添加扩展,安装成功
使用script 标签引入
<script type="text/javascript" src="../js/vue.js"></script>
打开页面会发现控制台有一个提示
翻译为
您正在开发模式下运行Vue。
在部署用于生产时,请确保打开生产模式。
查看更多提示https://vuejs.org/guide/deployment.html
我们可以关闭这个提示:使用Vue的全局配置
Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示。
容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法(插值表达式)
<div class="root">
</div>
想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
Vue实例和容器是一一对应的
真实开发中只有一个Vue实例,并且会配合着组件一起使用
先说一下两个配置项:
new Vue({
el:'#root',
//el:document.getElementById('root')//不常用
});
new Vue({
el:'#root',
data:{
name:'jack',
age:'20'
}
});
容器使用
<div id="root">
<h1>Hello,{{name}},{{age}}</h1>
</div>
效果:
容器:
<div class="root">
<h1>Hello,{{name}}</h1>
</div>
<div class="root">
<h1>Hello,{{name}}</h1>
</div>
Vue实例使用类选择器:
new Vue({
//el:'#root',
//el:document.getElementById('root')
el:'.root',
data:{
name:'jack',
age:'20'
}
});
效果:
插值表达式是Vue.js中实现数据渲染到页面的一种手段,可以直接让数据从模型到视图,不需要dom操作,
在大括号里面给我们提供了js语境,可以执行简单的js代码
注意区分:js表达式 和 js代码(语句)
例如我想把名字name大写:
<div id="root">
<h1>Hello,{{name.toUpperCase()}},{{age}}</h1>
</div>
效果:
例如当前程序,打开Vue开发者工具
把名字修改成Pike,效果: