Vue入门级小白

Vue起步

安装环境

安装环境:

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

HTML:
<div id="app">
  {{ message }}
</div>

JavaScript:
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

条件语句

v-if:

HTML:
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>落魄前端,在线炒粉</h1>
    </template>
</div>

JavaScript:
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

v-show:

HTML:
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>

JavaScript:
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

v-for

HTML:
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

 JavaScript:
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

v-bind

VUE - v-bind 详解

v-bind指令用于给html标签设置属性。

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

**改变id或class**

HTML:
<div id="app">
  <div v-bind:id="id1">文字</div>
</div>

javascript:
<script>
new Vue({
  el: '#app',
  data: {
    id1: 'myid'
  }
})
</script>

调用函数

<div :text='getText()'>test</div>
 ......
 <script>
export default {
  methods: {
    getText() {
      return "this is text"
    }
  }
}
</script> 

结果:

<div text="this is text">test</div>

v-model

它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})