vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

FanMagicOne

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量167

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42091045/article/details/89240790

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

根据vue中文文档学习地址

需要先装node.js

执行命令npm install vue

hello word输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> #导入vue的模块
</head>
<body>
<div id="app">
  {{message}}
</div>
<script>
  var app = new Vue(    #绑定vue函数
    {
      el:'#app',   #绑定元素id
      data:{       #找到模板语言
        message:'hello'
      }
    }
  )
</script>
</body>
</html>

鼠标动态加载v-bind 绑定标签方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="c1">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<script>
  var app2 = new Vue({
    el: '.c1',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  })
</script>
</body>
</html>

v-if=“seen” 控制属性是否隐藏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
    <p v-if='seen'>此处是内容 </p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            seen:true   #false是隐藏}
        })
</script>
</body>
</html>

循环语句v-for =''控制台输入app.s.push({text:'新内容'}）遍历对象添加新内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="c1">
  <ul>
    <li v-for="a in s">   #遍历的条件遍历从s元素里面遍历a
{{a.text}}</li>
  </ul>
</div>
<script>
  var app = new Vue({
    el : '.c1',
    data: {
      s: [              #遍历的元素
        {text:'hello'},
        {text:'helloWords'}
      ]
    }
  })
</script>
</body>
</html>

绑定事件v-on

v-on:click绑定一个点击事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="c1">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
var app = new Vue({
    el: '.c1',
    data: {
      message: 'helloword'
    },
    methods: {              #对事件逻辑处理    
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  }
)
</script>
</body>
</html>

表单和其他标签绑定v-model双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="c1">
  <p>{{message}}</p>
  <input v-model="message">
</div>
<script>
var app = new Vue({
  el: '.c1',
  data:{
    message:'hello'
  }
})
</script>
</body>
</html>

自定义组件

Vue.component('组件名',{

props:['属性名'],

template:"返回模板’}）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="c1">
  <wqu v-for="item in allDetail" v-bind:wq="item" v-bind:key="item.id"></wqu>
<!-- wqu对应组件名，wq对应组件属性，key之后用到 -->
</div>
<script>
Vue.component('wqu', {
  props: ['wq'],  //组件自定义属性
  template:"<h1>{{wq.text}}</h1>" //组件模板
})

var app =new Vue({
  el:'.c1',
  data :{
    allDetail:[
      {id:0 , text:'第一个'},
      {id:1 , text:'第二个'},
      {id:2 , text:'第三个'}
    ]
  }
})
</script>
</body>
</html>