vue基础知识

发布于 2020-04-02  135 次阅读


  1. 不要操作dom节点

  2. vue模板

    • template:用来放置html;template底下只能有一个根节点
    • script:js脚本
    • style:css样式
    <template>
        <div v-cloak></div>
    </template>
    <script>
    export default {
        //data放置vue的数据,以对象的形式存放
        data () {
          return {}
        },
        methods: {},
        components: {},
    }
    </script>
    //使v-cloak的display属性为none来解决闪烁问题
    <style scoped>
        v-clock{
            display: none;
        }
    </style>
    
  3. vue使用data里的数据
    • 传值表达式:俩个花括号里面跟属性;
    • v-text:获取文本数据;
    • v-html:获取html代码;
    <template>
        <div>
            <h1 v-text="title_1"></h1>
            <h1 v-html="title_1"></h1>
            <p>{{msg}}-{{info}}</p>
        </div>
    </template>
    <script>
    export default {
        data () {
            return {
                msg:"hello",
                info:"http://lqxzd,site",
                title_1:"标题",
                title_2:"<p style='color:pink'>标题</p>"
            }
        },
        methods: {},
        components: {},
    }
    </script>
    <style scoped>
    </style>
    
  4. vue中图片的打包
    • 新建assets文件夹和public文件夹
      • assets文件夹用来放需要编译的文件(编译后的文件不需要二次访问服务器)。
      • public文件夹用来放从外部引用,不需要编译的文件。
    • 配置webpack.config.js
      • exports里新增resolve节点
      const path = require('path')
      const htmlWebpackPlugin = require('html-webpack-plugin')
      const vueLoaderPlugin = require('./node_modules/vue-loader/lib/plugin')
      module.exports={
          entry: path.join(__dirname,'/src/main.js'),
          output:{
              path:path.join(__dirname,'/src/dist/'),
              filename:'bundle.js'
          },
          plugins:[
              new htmlWebpackPlugin({
                  template:path.join(__dirname,'./src/index.html'),
                  filename:'index.html'
              }),
              new vueLoaderPlugin()
          ],
      
          resolve: {
              //extensions用来解决main.js中引入时不想写扩展名问题
              extensions: ['.js', '.vue', '.json'],
              //alias代表别名
              alias:{
                  'assets':path.join(__dirname,"./src/assets")
              }
          },
          module:{
              rules:[
                  { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
                  /* 图片打包粗略的写法,使用时会出问题
                          { test: /\.(jpg|png|bmp|gif|jpeg)$/i, use: ['url-loader?limit=5120&name=[name][hash:6].[ext]'] },
                          */
                  //正确写法
                  { test: /\.(jpg|png|bmp|gif|jpeg)$/i, use: [{
                      loader:'url-loader',
                      options:{
                          //esModule设为false的作用是将图片解析出来
                          esModule:false,
                          name:'[name][bash:6].[ext]',
                          limit:10240
                      }
                  }] },
                  { test: /\.js$/i, use: ['babel-loader'],exclude:/node_modules/},
                  { test: /\.vue$/i, use: ['vue-loader'] }
              ]
          },
      }
      
    • vue中引用图片
      <template>
          <div v-cloak>
              //加波浪号代表assets是一个变量
              <img src="~assets/zdb_0.png" alt="">
          </div>
      </template>
      <script>
          export default {
              data () {
                  return {}
              },
              methods: {},
              components: {},
          }
      </script>
      <style scoped>
          v-clock{
              display: none;
          }
      </style>
      
  5. v-bind
    • 标签属性绑定data'数据用v-bind:,简写是 “ : ”
    <template>
        <div v-cloak>
            //加波浪号代表assets是一个变量
            <img src="~assets/zdb_0.png" alt="" v-bind:title="name">
            <img src="~assets/zdb_0.png" alt="" :title="name">
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    name:"泽兑"
                }
            },
            methods: {},
            components: {},
        }
    </script>
    
  6. v-on
    • 标签方法的绑定用v-on:,简写是 “ @ ”
    <template>
        <div v-cloak>
            <p>{{name}}</p>
            <button @click="add">点击</button>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    name:"泽兑"
                }
            },
            methods: {
                add(){
                    this.name=this.name+"-泽兑"
                }
            },
            components: {},
        }
    </script>
    
  7. v-model(一荣俱荣,一损俱损)
    • 双向绑定,相绑定的双方,任意一方的数据发生改变,另一方跟着改变;
    • 只适用于表单文件,例如:Input、textare。
    <template>
        <div v-cloak>
            <textarea v-model="msg" name="" id="" cols="30" rows="10"></textarea>
        </div>
    </template>
    
    <script>
        export default {
            data () {
                return {
                    msg : "https://lqxzd.site",
                }
            },
        }
    </script>
    
  8. vue中的循环:v-for
    • 有三个属性:value、key、index
    • value代表数据,key代表对象的key值,index代表索引值。
    • v-for为了保证循环出来的节点是唯一的,要求必须有一个key属性,这个key属性是唯一的。
    • key属性建议绑定ID,不建议绑定index。index是索引值,当对数组进行操作时,索引值可能会发生改变
    <template>
        <div v-cloak>
            <div class="comment">
                <ul>
                    <li v-for="(value,index) in comment" :key="index">     
                        {{value.content}}--------{{value.name}}
                    </li>
                </ul>
            </div>
        </div>
    </template>
    <script>
        export default{
            data: (){
            return {
            comment:[
            {content:"休",name:"坎"},
            {content:"生",name:"艮"},
            {content:"伤",name:"震"},
            {content:"杜",name:"巽"},
            {content:"景",name:"离"},
            {content:"死",name:"坤"},
            {content:"惊",name:"兑"},
            {content:"开",name:"乾"},
            ]
        }
        }
        }
    </script>
    <style scoped>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            resize: none;
        }
        v-cloak{
            display: none;
        }
        .comment>ul>li
        {
            height: 40px;
            line-height: 40px;
        }
        .comment>ul>li:nth-child(2n+1)
        {
            background:  pink;
        }
    </style>
    
    • 效果图:

      v-for.png

  9. 在methods里调用data的数据
    • methods不能直接使用data里面的变量,必须通过this关键字调用。
    • this指的是这个vue的实例。
  10. vue的渲染过程

    • vue会先在内存的虚拟DOM里虚拟渲染一个一样的页面;
    • vue会实时监测网站页面上的数据;
    • 页面上的数据发生改变,虚拟渲染的页面更新,从而使网站页面更新。
  11. vue实践之评论系统
    <template>
     <div v-cloak>
         <textarea v-model="content" name="" id="myText" cols="30" rows="10"></textarea>
         <input type="text" v-model="name">
         <button @click="add">点击发表评论</button>
         <hr>
         <div class="comment">
             <ul>
                 <li v-for="(value,index) in comments" :key="index">
                     {{value.content}}--------{{value.name}}  <button @click="del(index)">删除</button>
                 </li>
             </ul>
         </div>
     </div>
    </template>
    
    <script>
    export default {
     data () {
         return {
             comments:[
                 // {content:"",name:""},
             ],
             content : "https://lqxzd.site",
             name : "ZD"
         }
     },
    
     methods: {
         add(){
             let info = {content:this.content,name:this.name}
             this.comments.push(info)
         },
         del(i){
             this.comments.splice(i,1)
         }
     },
    
     components: {},
    }
    </script>
    
    <style scoped>
    *{
     margin: 0;
     padding: 0;
     list-style: none;
     resize: none;
    }
    v-cloak{
     display: none;
    }
    .comment>ul>li
    {
     height: 40px;
     line-height: 40px;
    }
    .comment>ul>li:nth-child(2n+1)
    {
     background:  pink;
    }
    </style>
    
    • 效果:
      vueTest_0.png

没有肆意生长的野心,哪来梦想的星辰大海。