【Day1:常用的Vue的基础指令】

1.v-bind（类和样式绑定）指令语法：

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件...）

语法：v-bind:href='xxx'或简写为:href='xxx',xxx同样要写js表达式，且可以直接读取到data中的所有属性

备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举例

        

<div id="root">
        <h1>指令语法</h1>
        <a v-bind:href="url">点我去百度</a><!-- v-bind：可以简写成： -->
        <a :href="url">点我去百度2</a>
   </div>
   <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name:'jack',
                url:'http://www.baidu.com',
            }
        })
   </script>

2.v-if（条件渲染）指令语法：

功能：用于有条件地渲染一个块。只有当指令的表达式返回一个真值时，才会呈现该块。

语法：v-if=“Keys in the data”，数据中的键

代码：

<div id="root">
        <p v-if="seen">{{msg}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;
         new Vue({
            el: "#root",
            data(){
            return { 
                seen:true,//控制数据显示/隐藏
                msg:'hello',
            }
        }
 </script>

3.v-for（列表渲染）指令语法:

功能：基于数组呈现项目列表。

语法：v-for item in itemsitemsitem（data数据中的键）

代码：

<div id="root">
        <ul v-for='item of msg'>{{item}}</ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data() {
                return {
                    msg: ['炸鸡', '汉堡', '可乐', '奶茶']
                }
            }
        });

4.v-on（绑定事件）指令语法：

功能：监听 DOM 并在它们被触发时运行一些 JS。

语法：v-on:click=“methodname”。

代码：

 <div id="root">
        <p>{{num}}</p>
        <input type="button" value="点击加一" v-on:click="add">//v-on:click 语法糖=@click
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data() {
                return {
                    num: 1,
                }
            },
            methods: {
                add() {
                    this.num++;
                }
            }
        });
    </script>

5.v-once指令语法：

功能：仅渲染元素和组件一次，之后Vue实例里的修改不生效。

代码：

<div id="app">
          <h2 v-once>{{msg}}</h2>//只能渲染一次，修改app.msg不能改变页面内容
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						msg:'中国'
					}
				}
			})
		</script>

6.v-model指令语法：

功能：双向绑定（v-model);数据不仅能从data流向页面，也能从页面流向data。

备注：1.双向绑定一般都应用在表单类元素上（input,select等)

            2.v-model：value可以简写成v-model，因为v-model默认收集的就是value的值。

代码：

<div id="root">
     双向绑定：   <input type="text" v-model="name">
     <!-- <h2 v-model:x="name">你好</h2>//报错 因为v-model只能应用在表单类元素（输入类元素）上-->
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name:'CSDN',
            }
        })