Js开发-Vue技术-前端模版

1. Vue文件中模块之template

<template>
  <div>
    <template v-if="temCon">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    <ul>
      <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider" role="presentation"></li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() { 
    return {
      temCon: true,
      items: [
        {'msg': '1111'},
        {'msg': '2222'},
        {'msg': '3333'}
      ]
    }
  }
}
</script>

2. Vue文件中模块之JS模块

index.html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
<body>
  <div id="app">
    <!-- data中绑定 -->
    <h1>
      <span>count(v-model使用):</span> <input v-model="count"></input>
    </h1>
    <br/>
    <!-- filters使用 -->
    <!-- {{ count | format(2) }}
         特别注意：
         1.方法format默认第一个参数是count且省略
         2.是第二个参数
    -->
    <h1>
       <span>count(filters使用):</span> {{count | format(2)}}
    </h1>
    <br/>

    <!-- computed中getter -->
    <div>computed中getter</div>
    <br/>
    <h1>countPlus: <span>{{countPlus}}</span></h1>
    <br/>

    <!-- computed中setter -->
    <div>computed中setter</div><br/>
    <button @click="add(1)" >Add</button><br/>

    <h1>countPlus: <span>{{countPlus}}</span></h1>
    <br/>
  </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app', 
        data:{
          count:1,
        },
        // 钩子函数，钩子函数在Vue创建实例时调用
        mounted:function(){
          alert('mounted:' + this.count);
        },
        //方法
        methods: {
          add(v) {
            this.countPlus = this.countPlus + v;
          }
        },
        // 过滤器
        filters:{
            format: function (a,n) { debugger; return a + "--" + n
          }
        },
        // 计算属性: 所有getter和setter的this上下文自动地绑定为Vue实例
        computed:{
          countPlus: {
            get() {
              return this.count + 1
            },
            set(value){
              this.count = value - 1
            }
          },
        },
        // 侦听属性,观察和响应 Vue 实例上的数据变动
        watch:{
          //侦听:count
          count (val) {
            alert('watch' + this.count);
          },
        }
    })
</script>

3. Vue文件中模块之 Style样式

1. CSS的模块定义 <style></style>

2. Style scoped

在使用Vue-Cli 开发时在组件的<style></style>加上scoped属性可以让<style></style>里的样式只在当前组件生效
Vue对scoped的渲染规则
对于所有的Vue组件 只要设置了<style scoped></style> Vue就会给该组件生成一个唯一data值。
Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点

如果组件内部包含子组件 这有两种情况
情况一：子组件没有设置<style scoped></style>，则只会给子组件的最外层标签加上当前组件的data属性
情况二：子组件设置了<style scoped></style>，则子组件会自动生成一个自己的唯一data值 然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
对于组件内写在<style scoped></style>里的样式，Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。
基于上面四点，Vue就实现的scoped的功能。因为，组件scoped里的样式都加了当前组件的唯一标识data属性。也就是说，即使当前组件的class跟其他组件重名，因为每个组件的data属性不一样，当前组件的样式也就不能再其他组件生效了。

渲染规则证明：
规则一：对于所有的Vue组件 只要设置了<style scoped></style> Vue就会给该组件生成一个唯一data值。

posted on 2019-08-09 14:03 小魔一剑阅读(29) 评论(0) 收藏举报