新手小白重返vue战场
引入vue
1.可通过官网下载vue.js再进行引入
2.通过npm进行引入，需要安装node
-
npm init -y此时会出现 package.json文件
-
npm install vue安装vue
-
再通过script将vue.js引入到所需页面即可
测试vue
<!DOCTYPE html>
<html lang="en">
<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">
<script src="node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script type="text/javascript">
const app=new Vue({
el: "#app",
data: {
message: 'i love you'
}
})
</script>
</html>在浏览器运行成功，但是发现右边有出乎意料的英文，其实那是vue中自带的提示，第一个是提醒我们下载开发者小工具，我们只需要下载后提示就会消失，另一个则是提醒我们引入的vue.js是开发模式类型，如果是在生产环境则别引入开发模式vue.js，因为开发模式下的vue.js体积大，不利于项目上线，这个提示需要我们借助Vue的配置项进行消除。
//消除第二个提示
Vue.config.productionTip = falseel与$mount
app.$mount("#app")el与$mount都是用来指定vue实例的挂载目标，不同的是后者更为灵活。$mount可以实现先执行某些工作后再挂载vue实例的效果
data与data()
两者实现效果一致，data()多用于组件
//对象式data
new Vue({
el:'#app',
data:{
message:'hello'
}
})
//函数式data
new Vue({
el:'#app',
data(){
return {
message:'hello'
}
}
})
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
