vue-入门打卡第一天（安装，指令）

安装vue

1、 开发环境版本，包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、生产环境版本，优化了尺寸和速度

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3、在 Vue.js 的官网上直接下载 vue.min.js 并用 script标签引入。

起步

1、每个vue应用都需要已通过实例化来实现，在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id，data 用于定义属性，{{ }} 用于输出对象属性和函数返回值。methods 用于定义的函数

   <div id="app">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script>
var app = new Vue({
    el:"#app",
     data() {
        return {
            
        }
    },
    methods: {
        
    },
})

    </script>

2、指令
①使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>今天星期几</h1>'
  }
})
</script>

②HTML 属性中的值应使用 v-bind 指令。
v-bind可以简写成“：”

<img v-bind:src="imgUrl" alt="">

 imgUrl:"https://dss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/e4dde71190ef76c6c23eed779e16fdfaae5167f9.jpg"

③v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。true是插入，false是不插入

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

④v-on 指令，它用于监听 DOM 事件，可以简写成“@”：

<a v-on:click="doSomething">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script>
var app = new Vue({
    el:"#app",
     data() {
        return {
            
        }
    },
    methods: {
        dosomething（）{
        alert(1)
        }
    },
})

    </script>

⑤在在 input、select、textarea、checkbox、radio 等表单控件元素上我们可以使用 v-model 指令来实现双向数据绑定

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>