Python 28 Vue框架

Posted 2022-06-02 yinwenjie

一、基本使用

<div id="odiv"> greeting </div>

<script src="./static/vue.min.js"></script>
<script>
    let vm = new Vue(
        el: "#odiv",
        data: 
            greeting: "hello world",
        
    )
</script>

二、常用指令

1、v-text、v-html

<div id="odiv" v-text="greeting"></div>
<div id="odiv" v-html="greeting"></div>
greeting: "<h1>hello world</h1>"

2、v-for：循环创建标签

<div id="odiv" v-for="num in yin"> num </div>
<div id="odiv" v-for="student in students"> student.name </div>

yin: [1, 2, 3]
students: [name: "yin", name: "wen", name: "jie"]

3、v-if、v-show

v-if是先append多个标签，如果不符合条件再remove，这样来回切换的效率较低。

v-show是给不符合条件的标签加上display=none，效率更高一些。

<div v-if="word == ‘xxx‘">有</div>
<div v-else-if="word == ‘xx‘">还是</div>
<div v-else>没有</div>

<div v-show="isShow">你好</div>

4、v-bind：绑定属性

<div v-bind:href="path">点击</div>
<div v-bind:class="active:isActive">有</div>
<div v-bind:class="[attr]">有</div>

isActive:true,
attr: "active"

5、v-on：绑定事件

<div v-on:click="change">点击</div>  // 可以简写成@click

methods:
    change:function()xxx

6、v-model：获取用户输入

    <div id="app">
        <input type="text" v-model="name"/>

        <input type="checkbox" value="男" v-model="genders"/>
        <input type="checkbox" value="女" v-model="genders"/>

        <select v-model="girlfriends">
            <option>康抻</option>
            <option>鞠莹莹</option>
            <option>嘉琪</option>
        </select>

        <textarea></textarea>

        <hr>
         name 
         genders 
         girlfriends 
    </div>

    <script>
        // 数据模板引擎
        // v-开头的指令是帮助我们渲染数据用的
        let vm = new Vue(
            el: "#app",
            data: 
                name: "juyingying",
                genders: [],
                girlfriends: []
            ,
        )
    </script>

View Code

7、计算属性：对数据进行加工操作

<input v-model="a">
<input v-model="b">
<input v-model="c">
<div> total </div>

data:a:1,b:2,c:3,
computed:
    total: function()
       return this.a + this.b + this.c
   

8、侦听器：当数据发生改变时触发

  data: 
    question: ‘‘,
    answer: ‘I cannot give you an answer until you ask a question!‘
  ,
  watch: 
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) 
      this.answer = ‘Waiting for you to stop typing...‘
      this.debouncedGetAnswer()
    
  ,

9、指令修饰符：对用户输入的数据加工

v-model.number="xx"  // 将输入的数据改为数值类型
v-model.trim="xx"  // 将输入的数据两端的空白去除
v-model.lazy="xx"  // 在失去焦点时才更新数据

10、获取DOM元素

<div id="app">
    <div ref="t" v-text="greeting"></div>
    <button v-on:click="changeColor">点击变红</button>
</div>

<script src="./static/vue.min.js"></script>
<script>
    new Vue(
        el: "#app",
        data: 
            greeting: "hello world",
        ,
        methods:
            changeColor:function()
                this.$refs.t.style.color = "red";
            
        
    )
</script>

11、自定义指令

Vue.directive("pos", function(el, bindding)  // 第一个参数是指令名称，第二个参数是一个函数，其中参数1是绑定的标签，参数2是传入的数据
    if (bindding.value=true)
        el.style.position = "fixed";
        el.style.right = 0;
        el.style.bottom = 0;
    
)