xml地图|网站地图|网站标签 [设为首页] [加入收藏]

js基础知识小结,js第四天学习笔记

来源:http://www.ccidsi.com 作者:最新解决方案 人气:192 发布时间:2019-08-21
摘要:4.综合 调用组件: window.onload = function () { var c = new Vue({ el : '#box', data : { url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg' } }); }div id="box" img src="{{url}}" alt="皇家88平台 1"//div div i

4.综合

调用组件:

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
  }
  });
 }


<div id="box">
  <img src="{{url}}" alt="皇家88平台 1"/>
</div>
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
   el: "#app",
   data:{
    message:"Hello Vue.js!"  
   },
   methods:{
    reverseMessage:function()
    {
      this .message = this.message.split('').revserse().join('');
    }
  }
})
<template>
<div class='example-content'>
<compexample :compvalue.sync='values' :compfun='compFun'></compexample>
</div>
</template>
<script>
import compexample from './componentExample.vue'//引入组件
export default {
 components: {
 compexample
 },
 ready: function() {
 },
 methods: {
 compFun:function(){
  alert('喵嘞个咪');
 }
 },
 data() {
 return {
  values:'hello'
 }
 }
}
</script>

二、v-bind绑定属性的值

3.管理用户输入

皇家88平台,下边看写调用组件后的职能图吧:

四、绑定两个性子

3.v-for列表渲染

在小颖写的零部件中,小颖把创立组件时,组件的好多性质都加了相应注释,大家看了尽管还应该有怎么样疑点,能够留言哦.

vue类别教程第五篇,即绑定设置属性的各类措施,具体内容如下

<div id="app">
 <p>{{message}}</p>
<input v-model="message" />
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
<template>
<div class='content' v-if='showFlag'>
<input type="text" v-bind:style='{ width:compwidth "px"}' v-model='compvalue' @keyup='myFun' v-el:getvalue>
<label class='example-label'>观察参数"compvalue"的变化:</label>{{compvalue}}
<button class='btn btn-danger' @click='compfun'>确定</button>
</div>
</template>
<script>
export default {
 // 从父组件接收收据
 props:{
 compvalue:{
  type:String,//类型(原生构造器:String, Number, Boolean, Function, Object, Array),如果绑定类型不对将抛出一条警告
  required: true, //是否是必须项
  twoWay:true,//指定这个 prop 为双向绑定,如果没有 'sync' 将抛出一条警告
  default:'',//默认值
 },
 compwidth:{
  coerce: function (val) {
  return val   '' // 将值转换为字符串
  }
 },
 compfun:{
  type:Function,
  required:true
 }
 },
 ready: function() {},
 computed:{},//计算属性
 methods: {//组件自身的方法
 myFun:function(){
  alert( this.$els.getvalue.value);
 }
 },
 data() {//绑定数据
 return {
  showFlag:true,
 }
 }
}
</script>

三、简写形式,冒号 (:) 绑定

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:js基础知识小结,js第四天学习笔记

关键词: 68399皇家赌场

最火资讯