vue学习第一天第一个vue

2021-10-09 21:02:33 阅读：152 来源： 互联网

标签：el Vue 第一个第一天 app vue msg new data

1-第一个vue

vue官网:https://cn.vuejs.org/

第一个vue代码

 <div id="app">

        <h3>
            {{msg}}
            我的世界
        </h3>
    </div>

    <script src="./js/vue.js"></script>

  //js
new Vue({

            el: "#app",//决定数据挂在在哪个元素之下
            data: {
                msg: "hello word"

            }

        })

创建Vue(实例化Vue方法) new Vue

2-胡子语法

{{}}作用,胡子方法,添加元素到html内部

    <div id="app">

        <h3>
            姓名{{student.name}},性别{{student.sex}},年龄{{student.age}}{{msg}}
        </h3>
    </div>

  new Vue({

            el: "#app",
            data: {
                student: {
                    name: "张三",
                    age: 35,
                    sex: "男"
                },


                msg: "hello word"

            }

        })

el: "#app",//决定数据挂在在哪个元素之下

3-用户代码片段

打开首选项-用户片段-html

将代码片段加入,之后在html中输入hv会快速生成vue简单框架

"html:5": {
		"prefix": "hv",
		"body": [
			"<!DOCTYPE html>",
			"<html>",
			"<head>",
				"\t<meta charset=\"UTF-8\">",
				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
				"\t<title></title>",
			"</head>",
			"<body>",
				"<div id=\"app\"></div>",
			"</body>",
			"</html>",
			"<script src=\"./lib/vue.js\"></script>",
			"<script>",
				"new Vue({",
					"\tel: \"#app\",",
					"\tdata: {",
						"\t",
					"\t}",
				"})",
			"</script>"
		],
		"description": "HTML5"
	}

4-v-model双向绑定案例

v-model指令,标签属性,经常作为input和textarea的属性

   <div id="app">

        <input type="text" v-model="msg" />

        <h3>{{msg}}</h3>

    </div>

 new Vue({
            el: "#app",
            data: {
                msg: "世界你好"

            }
        })

5-原生js实现双向绑定

    <input type="text" id="ipt" value="世界你好" oninput="inputChage(this.value)">

    <h3 id="title"></h3>

oninput="inputChage(this.value)"行内js绑定,oninput当输入内容改变时候执行...

  var ipt = document.getElementById("ipt")
        var tel = document.getElementById("title")
        var data = {};
        Object.defineProperty(data, 'msg', {
            get: function () {
                return "你好世界"
            },
            set: function (newVal) {
                //代表当你拿到最新的值时,你想要做的
                console.log(newVal);
                tel.innerHTML = newVal;
                ipt.value = newVal;
            }
        })

        tel.innerHTML = data.msg;
        ipt.value = data.msg
        function inputChage(val) {
            // var val = ipt.value

            data.msg = val
        }

6-v-指令

v-pre作用,让胡子语法失效

        <span>当你输入<span v-pre>{{msg}}</span>的时候,你可以看到{{msg}}</span>

v-html="msg"可以解析html标签

v-text胡子语法一样,都无法解析html标签

作用相当于innerHtml和innerText

v-cloak斗篷搭配style使用

补充:[v-cloak]{

display:noe

}style选择器,选择标签

  [v-cloak] {
            display: none;
        }

<div id="app">
        <h3 v-cloak>
            {{msg}}
            我的世界
        </h3>
    </div>

 new Vue({
                el: "#app",
                data: {
                    msg: "hello word"
                }
            })

v-show="true、false"控制盒子显示隐藏(控制的是css的display属性)

        <div class="box" v-show="false">盒子1</div>

v-if="ture false"控制盒子显示隐藏(是通过创建和销毁dom元素实现的)

用法:v-show="{{flag}}"//然后在vue中控制flag

v-if="条件"条件判断显示隐藏

v-eles-if="条件"

    <div id="app">
        <ul>

            <li v-if="score>=90">优秀</li>
            <li v-else-if="score>=60">及格</li>
            <li v-else>不及格</li>
        </ul>
    </div>

<script>
    new Vue({
        el: "#app",
        data: {
            score: 65

        }
    })
</script>

绑定点击事件

v-on:click="btnClick"

或者@click=“btnClick”

数据放data

函数方法放methods

用法：

    <div id="app">
        <input type="button" value="这是一个按钮" @click="btnClick">
        <div class="box" v-show="false">盒子1</div>
        <div class="box" v-show=true>盒子2</div>
        <div class="box" v-show="flag">盒子3</div>
    </div>
    <script>
    new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {//data中放数据,methods里放方法
            btnClick() {
                this.flag = !this.flag
            }
        }
    })
</script>

选项卡案例

<div id="app">
        <button @click="btnClick(1)">选项1</button>
        <button @click="btnClick(2)">选项2</button>
        <button @click="btnClick(3)">选项3</button>

        <hr>

        <h2 v-show="num==1">盒子1</h2>
        <h2 v-show="num==2">盒子2</h2>
        <h2 v-show="num==3">盒子3</h2>

    </div>

<script>
    new Vue({
        el: "#app",
        data: {
            num: null
        },
        methods: {
            btnClick(lev) {
                console.log(this);
                this.num = lev
                //this指向vue

            }

        }
    })
</script>

标签：el,Vue,第一个,第一天,app,vue,msg,new,data
来源： https://www.cnblogs.com/jiali1010/p/15387564.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9