Vue入门1

- 日理万妓 2022-02-02 21:04 223阅读 0赞

<div id="app">
        <p>{
       {message}}</p>
        <h1>{
       {details()}}</h1>
    </div>
    引入：
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    实例化：
    <script>
    var app = new Vue({
        el : '#app',
        data : {
            message : '123123',
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    });
    </script>

注：vue实例中的  
1）el 是dom元素的id  
2）data 定义了属性  
3）methods 用于定义函数，return 来返回函数值  
4）\{ \{\}\}用于输出对像的属性和返回值  
5）vue中数据的拷贝是浅拷贝

var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob

v-html 用于输出html代码

<div id="app">
        <div v-html="message"></div>
    </div>
    <script>
    new Vue({
          el: '#app',
          data: {
            message: '<h1>菜鸟教程</h1>'
          }
    });
    </script>

v-bind 用于进行属性的绑定  
v-bind:+html属性能更新html的属性

<div id="app2">
      <span v-bind:title="message">
           鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>
    <script>
    var app2 = new Vue({
        el : '#app2',
        data : {
            message : '123123123 ' + new Date().toLocaleString()
        },
    });
    </script>

vue中判断用v-if && v-show用来判断是否展示元素

<div id="app"><p v-if="seen">现在你看到我了</p></div>
    <script>
    new Vue({
        el: '#app',
          data: {
            seen: true
        }
    });
    </script>
    
    <div v-if="type === 'A'"></div>
    <div v-else-if="type === 'B'"></div>
    <div v-else-if="type === 'C'"></div>
    <div v-else></div>
    
    在 <template> 元素上使用 v-if 条件渲染分组,最终的渲染结果将不包含 <template> 元素。
    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    
    v-show 只是简单地切换元素的 CSS 属性 display。
    <h1 v-show="ok">Hello!</h1>

v-once 只渲染元素和组件一次

<span v-once>不会改变{
       {message}}</span>

v-for循环   
1)把一个数组对应为一组元素

<ul id="example-2">
        <li v-for="item in items">
            {
       { item.message }}
        </li>
        <li v-for="(item, index) in items">
            {
       { parentMessage }} - {
       { index }} - {
       { item.message }}
        </li>
    </ul>
    <script>
    var example2 = new Vue({
      el: '#example-2',
      data: {
        parentMessage: 'Parent',
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    });
    </script>

2)一个对象的 v-for

<ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {
       { value }}
        </li>
          <div v-for="(value, name) in object">
              {
       { name }}: {
       { value }}
        </div>
    </ul>
    <script>
    var vm =new Vue({
      el: '#v-for-object',
      data: {
        object: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        }
      }
    });
    </script>

数组相关方法：基于js中数组的方法

修改数组中单个元素方法：  
1. vm.items\[indexOfItem\] = newValue  
2. 使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：  
vm.$set(vm.items, indexOfItem, newValue)

修改object中单个元素方法：

Vue.set(object, propertyName, value)

或vm.$set(vm.items, indexOfItem, newValue)

[组件v-for][v-for]

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

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

[表单相关v-model.值绑定][v-model.]

v-model修饰符  
.lazy 在输入时就于后台的数据进行同部，在change事件同步

<input v-model.lazy="msg" >

.number 自动将输入值转换为number  
.trim 过滤输入中首尾的空格

v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。  
用v-on:click监听是否点击

<div id="app">
        <p>{
       { message }}</p>
        <button v-on:click="reverseMessage">反转字符串</button>
    </div>
    <script>
    new Vue({
          el: '#app',
          data: {
            message: 'Runoob!'
          },
          methods: {
            reverseMessage: function () {
                  this.message = this.message.split('').reverse().join('')
            }
          }
    });
    </script>

<a v-on:click.stop="doThis"></a>
    
    
    <form v-on:submit.prevent="onSubmit"></form>
    
    
    <a v-on:click.stop.prevent="doThat"></a>
    
    
    <form v-on:submit.prevent></form>
    
    
    
    <div v-on:click.capture="doThis">...</div>
    
    
    
    <div v-on:click.self="doThat">...</div>
    
    
    <a v-on:click.once="doThis"></a>

v-on 在监听键盘事件时提供了按键的修饰符

<input v-on:keyup.enter="submit">
    
    
    <input v-on:keyup.13="submit">

支持的按键别名：

<input v-on:keyup.enter="submit">
    
    <input @keyup.enter="submit">
    全部的按键别名：
    
    .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

[v-for]: https://cn.vuejs.org/v2/guide/list.html#%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6%E7%9A%84-v-for
[v-model.]: https://cn.vuejs.org/v2/guide/forms.html#%E5%80%BC%E7%BB%91%E5%AE%9A