脚本宝典收集整理的这篇文章主要介绍了vue.js 基础知识篇，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue inIT webpack my-PRoject
$ cd my-project
$ npm install
$ npm run dev
- 1 . 数据双向绑定
- 2 . 指令
- 3 . 模板
- 4 . 组件
<div id="app">
{{msg}}
</div> <script>
var data={
msg:"hello world" // model数据
};
new Vue({ // viewmodel视图模型
el:"#app",
data:data
});
//vue 是一个 mvvm框架
//model-view-viewmodel 这三部分的组合
</script><div id="app">
{{massage}}
</div>var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}<div id="app">
<p>{{message}}</p>
<input v-model="message" />
</div>var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
<div id="app">
<h1 v-if="kanjian">我能看到</h1>
</div><script>
var app = new Vue({
el:"#app",
data:{
kanjian:true
}
});
</script>
<div id="app1">
<ol>
<li v-for="todo in toDOS">
{{todo.text}}
</li>
</ol>
</div><script>
var app1 = new Vue({
el:"#app1",
data:{
todos:[
{text:"学习Vue"},
{text:"学习node"},
{text:"学习jquery"}
] }
});
</script><div id="app">
<p>{{ message }}</p>
<button v-on:click="reverSEMessage">Reverse Message</button>
</div>new Vue({
el: "#app",
data:{
message:"Hello Vue.js!"
},
methods:{
reverseMessage:function()
{
this .message = this.message.split('').revserse().join('');
}
}
})
以上是脚本宝典为你收集整理的vue.js 基础知识篇全部内容，希望文章能够帮你解决vue.js 基础知识篇所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。