2. 科技
  3. Vue初识

Vue初识

it2022-05-05  135

Vue框架

# Angular React Vue​# js渐进式框架：一个页面小到一个变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目​# 思考：vue如何做到一次引入控制整个项目 => 单页面应用 => vue基于组件的开发 # vue的工作原理：vue如何渲染一个页面    # vue的组件概念    # vue路由的概念    # vue的ajax概念(axios)# 学习曲线：vue的指令 vue的实例成员 vue组件 vue项目开发

 

Vue的优点

"""1.单页面：高效2.虚拟DOM：页面缓存3.数据的双向绑定：数据是具有监听机制4.数据驱动：从数据出发，不是从DOM出发 """

 

Vue的使用

"""1.下载vue.js：https://vuejs.org/js/vue.js2.在要使用vue的html页面通过script标签引入3.在html中书写挂载点的页面结构，用id表示4.在自定义的script标签实例化Vue对象，传入一个大字典5.在字典中通过 el与挂载点页面结构绑定，data为其提供数据""" <!DOCTYPE html><html>、<head>    <meta charset="UTF-8">    <title>vue初识</title></head><body><div id="app">    <!-- {{ vue变量 }} 插值表达式 -->    <h1>{{ h1_msg }}</h1>    <h2>{{ h2_msg }}</h2></div></body><script src="js/vue.js"></script><script>    new Vue({        el: '#app',  // 挂载点        data: {  // 为挂载点的页面结构提供数据            h1_msg: 'h1的内容',            h2_msg: 'h2的内容',       }   })</script></html>

 

vue完成简单的事件

<div id="app">    <h1 v-on:click="clickAction">h1的内容是{{ msg }}</h1></div></body><script src="js/vue.js"></script><script>    new Vue({        el: '#app',        data: {            msg: 'vue渲染的内容'       },        methods: {  // 为挂载点提供事件的            clickAction: function () {                alert(123)           }       }   })</script>

 

vue操作简单样式

<div id="app">    <p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>    <div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div></div></body><script src="js/vue.js"></script><script>    new Vue({        el: '#app',        data: {            v_style: {                color: 'black'           }       },        methods: {            btnClick: function () {                this.v_style.color = 'green'           }       }   })</script>

 

小结

"""1.vue通过 v-* 指令来控制标签2.vue通过 变量 来驱动页面"""

 

指令

文本指令
<div id="app">    <!-- 插值表达式就是 v-text -->    <p>{{ msg1 }}</p>    <p v-text="msg2"></p>        <!-- 可以解析html标签 -->    <p v-html="msg3"></p>        <!-- 必须赋初值，渲染的结果永远不会发生改变 -->    <p v-once="msg3"  v-on:mouseover="action">{{ msg3 }}</p></div></body><script src="js/vue.js"></script><script>    new Vue({        el: '#app',        data: {            msg1: '**msg1**',            msg2: '<b>**msg2**</b>',            msg3: '<b>**msg3**</b>',       },        methods: {            action: function () {                // var msg = this.$data.msg4;                this.msg3 = '<i>**new msg3**</i>'           }       }   })</script>

 

事件指令
<div id="app">    <!-- v-on:事件名="函数名" 可以简写为 @事件名="函数名" （v-on: => @）-->    <p v-on:click="action1">{{ msgs[0] }}</p>    <p @click="action2">{{ msgs[1] }}</p>​    <!-- 事件的传参 -->    <ul>        <li @click="liAction(100)">列表项1</li>        <li @click="liAction(200)">列表项2</li>        <li @click="liAction(300)">列表项3</li>    </ul>​    <!-- 鼠标事件的对象：直接写函数名，默认将鼠标事件对象传入 -->    <div @click="func1">func1</div>    <!-- 鼠标事件的对象：一旦添加(),就必须手动传参，$event就代表鼠标事件对象 -->    <div @click="func2($event, 'abc')">func2</div></div></body><script src="js/vue.js"></script><script>    new Vue({        el: '#app',        data: {            msgs: ['11111', '22222']       },        methods: {            action1: function () {                alert(this.msgs[0])           },            action2: function () {                alert(this.msgs[1])           },            liAction: function (num, msg) {                console.log(num, msg)           },            func1: function (ev) {                console.log(ev)           },            func2: function (ev, msg) {                console.log(ev);                console.log(msg)           }       }   })</script>

 

属性指令
<div id="app">    <!-- 属性指令：用vue绑定属性，将属性内容交给vue处理 -->    <!-- 语法：v-bind:属性名="变量" (v-bind: 可以简写为 :) -->    <p class="" style="" v-bind:owen="oo" :jason="jj"></p>​​    <!-- class 属性 -->    <p :class="c1" @click="action1"></p>    <!-- 多类名 -->    <p :class="[c1, c2]"></p>    <!-- 'br' 固定写死的数据，不再是变量 -->    <p :class="[c1, 'br']"></p>​    <!-- style 属性 -->    <!-- 一个变量：该变量值为{},{}内部完成一个个属性的设置 -->    <p class="gDiv" :style="s1">12345</p>    <!-- 一个{}：{}内一个个属性有一个个变量单独控制 -->    <p class="gDiv" :style="{fontSize: fs, color: c}">67890</p>​</div></body><script src="js/vue.js"></script><script>    new Vue({        el: '#app',        data: {            oo: 'Owen',            jj: 'Jason',            c1: 'rDiv',            c2: 'br',            s1: {                // 'font-size': '30px'                fontSize: '30px',                color: 'pink'           },            fs: '20px',            c: 'orange'       },        methods: {            action1: function () {                if (this.c1 == 'rDiv') {                    this.c1 = 'gDiv'               } else {                    this.c1 = 'rDiv'               }           }       }   })</script>

 

条件指令
<meta charset="UTF-8"><style>    .div {        width: 100px;        height: 100px;        background-color: greenyellow;        border-radius: 50%;   }</style><div id="app">    <!-- 条件指令 v-show | v-if-->    <!-- v-show：消失是以 display: none渲染 -->    <div class="div" v-show="s1"></div>    <div class="div" v-show="s1"></div>    <!-- v-if：消失时不会被渲染，所以建议建立缓存, 用key属性 -->    <div class="div" v-if="s2" key="div1"></div>    <div class="div" v-if="s2" key="div2"></div></div></body><script src="js/vue.js"></script><script>    new Vue({        el: '#app',        data: {            s1: false,            // s2: false 没写默认为false       }   })</script> <meta charset="utf-8"><style>    ul li {        border: 1px solid black;        width: 60px;        float: left;   }    ul {        list-style: none;   }    ul:after {        content: "";        display: block;        clear: both;   }    .wrap {        width: 500px;        height: 200px;   }    .red { background-color: red; }    .blue { background-color: blue; }    .green { background-color: green; }</style><div id="app">    <!-- v-if v-else-if v-else 案例 -->    <ul>        <li @click="changeWrap(0)">red</li>        <li @click="changeWrap(1)">green</li>        <li @click="changeWrap(2)">blue</li>    </ul>    <!-- red页面逻辑结构 -->    <div class="wrap red" v-if="tag == 0" key="aaa"></div>    <!-- green页面逻辑结构 -->    <div class="wrap green" v-else-if="tag == 1" key="bbb"></div>    <!-- blue页面逻辑结构 -->    <div class="wrap blue" v-else key="ccc"></div>    <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->    <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 --></div><script src="js/vue.js"></script><script type="text/javascript"> new Vue({ el: "#app", data: { tag: 0, }, methods: { changeWrap (num) { this.tag = num; } } })</script>
条件指令2
<div id="app">    <p v-if="r1" key="p_r1">if条件</p>    <p v-show="r2">show条件</p>    <!--{{ num + 1 - 5 * 2 + '好的' }}-->        <ul>        <!--v-else会默认与v-if等有条件的分支绑定-->        <!--v-else-if必须由条件才和有条件v-if分支绑定-->        <li v-if="tag == 1">111</li>        <li v-else-if="tag == 2">222</li>        <li v-else>333</li>    </ul>​    <ul>        <li @click="action('a')">a</li>        <li @click="action('b')">b</li>        <li @click="action('c')">c</li>    </ul>        <ul>        <li v-show="flag == 'a'">aaa</li>        <li v-show="flag == 'b'">bbb</li>        <li v-show="flag == 'c'">ccc</li>    </ul></div><script src="js/vue.js"></script><script>    new Vue({        el: '#app',        data: {            num: 10,            r1: false,            r2: false,            tag: 2,            flag: 'a'       },        methods: {            action: function (s) {                this.flag = s           }       }   })</script>

 

循环指令
<div id="app">    <p>{{ nums[2] }}</p>    <ul>        <!-- 只遍历值 -->        <li v-for="num in nums">{{ num }}</li>    </ul>​    <ul>        <!-- 值与索引 -->        <li v-for="(num, index) in nums">{{ num }} {{ index }}</li>    </ul>​    <ul>        <!-- 值，键，索引 -->        <li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}</li>    </ul></div><script src="js/vue.js"></script><script>    new Vue({        el: '#app',        data: {            nums: [5, 3, 2, 1, 4],            people: {                'name': 'Owen',                'age': 17.5,                'gender': 'others'           }       }   })</script>

 

评论案例
<style>    span {        margin-left: 100px;        cursor: pointer;        color: green;   }    span:hover {        color: red;   }</style>​<div id="app">    <p>        <input type="text" v-model="val">        <button @click="add">评论</button>    </p>    <ul>        <li v-for="(info, i) in infos">           {{ info }}            <span @click="del(i)">x</span>        </li>    </ul></div>​<script src="js/vue.js"></script>​<script>    new Vue({        el: '#app',        data: {            infos: [],  // 管理所有留言            val: ''  // 管理当前留言       },        methods: {            del: function (i) {                // splice: 从哪个索引开始 操作的位数 操作成的结果(可变长)                this.infos.splice(i, 1)  // 删除留言           },            add: function () {                let val = this.val;                if (val) {                    this.infos.splice(0, 0, val);  // 留言                    this.val = ''  // 输入框置空               }           }       }   })</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/zhangdajin/p/11155202.html

相关资源：个人简历模板

专利

最新回复(0)