vue 学习1

.static{
   border-radius:4px;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}

<div id="div1">
        {{message}}
    </div>
<div id="div2" v-bind:class="{'class1':use}"><!-- 属性绑定-->
    <p>url:{{url}}</p>        <!-- 文本的绑定-->
    <p>site:{{site}}</p>
    <p>{{name}}</p>
    <p>{{details()}}</p>   <!--方法-->
    <p v-html="htmlcode"></p>   <!--html代码-->
    <p>
        {{message.split('').reverse().join('')}}  <!--表达式-->
        <br>
        <span v-bind:id="'idList'+id">spanid</span>   <!--属性绑定-->
    </p>
    <p v-if="seen">you see me now</p>
    <a v-on:click="dosomeThing" href="#">v-on</a>
    <p> <a href="https://www.baidu.com" target="_blank" v-on:click.prevent>修饰符.</a></p><!--.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()-->
    <p>
        <input type="text" v-model="message">
    </p>
    <div v-bind:id="rawId | formatId">{{rawId | formatId}}</div> <!-- 过滤器，由"管道符"指示-->
    <p v-if="type == 'A'">A</p>         <!--条件判断-->
    <p v-else-if="type == 'B'">B</p>
    <p v-else-if="type == 'C'">C</p>
    <p v-else>not A/B/C</p>
    <h1 v-show="isShow">Hello!</h1>
    <ol><!--循环简单数组-->
        <ul v-for="(site,index) in sites">   <!--第一个参数是数组值，第二个参数是索引，可以不要索引-->
        {{index}}: {{ site}}
        </ul>
    </ol>
    <ol><!--循环对象数组-->
        <ul v-for="(site,index) in sites1">
        {{index}}: {{ site.name }}
        </ul>
    </ol>
     <ul><!--在模板中循环-->
        <template v-for="site in sites">
          <li>{{ site.name }}</li>
          <li>--------------</li>
        </template>
      </ul>
    <ol>
        <ul v-for="(site,index) in sites1">
            {{index}}:
            <span v-for="(value,key,i) in site" :prop1="value">  <!--内循环，遍历对象属性，第一个参数是属性值，第二个参数是属性名，第三个参数是索引，可以只有第一个参数-->
                {{i}}:{{key}}:{{value}}&gt;&gt;&gt;
            </span>
        </ul>
    </ol>
    <ul>   <!--可以遍历整数-->
        <li v-for="n in 10">
            {{ n }}
        </li>
    </ul>
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
    <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
    <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
    <div id = "computed_props">
        千米 : <input type = "text" v-model = "kilometers">
        米 : <input type = "text" v-model = "meters">
    </div>
    <p id="info"></p>
    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>   <!--样式绑定，设置直接对象-->
    <br>
    <div v-bind:class="classObject"></div>  <!--样式绑定，设置vue数据中的对象-->
    <br>
    <div v-bind:class="classObject1"></div>  <!--样式绑定，绑定返回对象的计算属性-->
    <br>
    <div v-bind:class="[activeClass, errorClass]"></div> <!--样式绑定，设置数组，字符串做下标索引-->
    <br>
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div><!---->
    <br>
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">杭州星迈科技有限公司</div><!--直接设置样式-->
    <div v-bind:style="styleObject">杭州星迈科技有限公司</div><!--直接绑定到一个样式对象--><!---->
    <div v-bind:style="[baseStyles, overridingStyles]">杭州星迈科技有限公司</div><!--使用数组将多个样式对象应用到一个元素上-->
    <!---->
    <button v-on:click="say('what')">Say what</button><!--用内联 JavaScript 语句-->
    <!--事件修饰符，通过由点(.)表示的指令后缀来调用修饰符-->
    <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><!-- click 事件只能点击一次，2.1.4版本新增 -->
    <!--按键修饰符，监听键盘事件-->
    <input v-on:keyup.13="submit"><!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input v-on:keyup.enter="submit">
    <input @keyup.enter="submit"><!-- 缩写语法 -->
    <!--表单元素-->
    <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    <p>单个复选框：</p><!--是一个为逻辑值，如果是多个则绑定到同一个数组-->
  <input type="checkbox" id="checkbox" v-model="checked">
     <input type="checkbox" id="checkbox1" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <span>选择的值为: {{ checkedNames }}</span>
  <!--单选框-->
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
  <!--下拉菜单-->
   <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>

var div1 = new Vue({
    el:"#div1",
    data:{
        message:"div1 messgae"
    }
});
var cnt=0;
var div2 = new Vue({
    el:'#div2', //
    data:{
        site:"杭州星迈科技有限公司",
        name:"杭州星迈科技有限公司",
        url:"www.sensomics.cn",
        use:true,
        htmlcode:"<h1>hello h1</h1>",
        message:"hello express",
        id:2,
        seen:true,
        rawId:"mess"
        isShow:true,
        sites: [
           'Runoob',
           'Google',
           'Taobao'
        ],
        sites1: [
             { name: 'Runoob',url:"www.runoob.com" },
             { name: 'Google',url:"www.google.com" },
             { name: 'Taobao',url:"www.taobao.com" }
        ],
        kilometers : 0,
        meters:0,
        isActive: true,
        hasError: true,
        classObject: {
           active: true,
           'text-danger': true
        },
        activeClass: 'active',
        errorClass: 'text-danger'，
        error: {
            value: true,
            type: 'fatal'
        },
        activeColor: 'green',
        fontSize: 30，
        baseStyles: {
            color: 'green',
            fontSize: '30px'
        },
        overridingStyles: {
            'font-weight': 'bold',
            fontSize:'40px'
        },
        message2:"helj",
        checked : false,
        checkedNames: [],
        picked: 'Runoob',
        selected: ''
    },
    methods:{
        details: function(){
            return this.site + "是一个基因数据分析公司"
        },
        dosomeThing:function(){
            alert("v-on,监听事件");
            div1.$data.message = "message from a in div2";
        },
        reversedMessage2: function () {
            cnt+=1;
            return cnt+this.message.split('').reverse().join('');
        },
        say: function (message) {
             alert(message);
        }
    },
    filters:{           //过滤器
        formatId:function(value){
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    },
    computed: {

        /**
        cnt 是独立于 vue 对象的变量。在使用 reversedMessage 这个计算属性的时候，第一次会执行代码，得到一个值，
        以后再使用 reversedMessage 这个计算属性，因为 vue 对象没有发生改变，于是界面渲染就直接用这个值，
        不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样
         */
        reversedMessage: function () { // 计算属性的 getter
            cnt+=1;
            return cnt+this.message.split('').reverse().join('');
        },
        company: {
            get: function () { // getter
                 return this.name + ' ' + this.url
            },
            set: function (newValue) { // setter
                 var names = newValue.split(' ')
                this.name = names[0]
                this.url = names[names.length - 1]
           }
        },
        classObject1: function () {
            return {
                    base: true,
                    active: this.isActive && !this.error.value,
                    'text-danger': this.error.value && this.error.type === 'fatal',
            }
        }
    },
    watch : {
       kilometers:function(val) {
          this.kilometers = val;
          this.meters = val * 1000;
       },
       meters : function (val) {
          this.kilometers = val/ 1000;
          this.meters = val;
       }
    }
});
div2.company = 'baidu https://www.baidu.com';  调用 setter， div2.name 和 div2.url 也会被对应更新
div2.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
});

DOM绑定

dom文本插值："{{message}}"
dom元素属性绑定：v-bind
dom innerhtml代码输出：v-html
dom 内表达式 {{expression}}

带v-前缀的属性是指令,在指令后的冒号后面跟着的是‘参数’
v-bind:
v-html:
v-if: 将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
v-on: 事件监听
v-model：用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来,div1.$data.message = "message from a in div2";

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示
    过滤器可以串联：{{ message | filterA | filterB }}
 过滤器是 JavaScript 函数，因此可以接受参数：
 {{ message | filterA('arg1', arg2) }}，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数

Vue.js 为两个最为常用的指令提供了特别的缩写：
    !-- 完整语法 -->
 <a v-bind:href="url"></a>
 <!-- 缩写 -->
 <a :href="url"></a>
 
 <!-- 完整语法 -->
 <a v-on:click="doSomething"></a>
 <!-- 缩写 -->
 <a @click="doSomething"></a>
 
条件判断：v-if v-else-if v-else,根据表达式的值来决定是否插入dom元素， v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
       v-show,根据条件决定是否显示dom元素
for循环 v-for：可以循环数组，和对象, v-for="v in vs"
computed计算属性：methods 和 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖（vue实例对象属性）发生改变时才会重新取值。
                而 methods，在重新渲染的时候，函数总会重新调用执行，可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
    computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
监听属性 watch: 通过 watch 来响应数据的变化

样式绑定：v-bind:class="", 可以设置一个对象，或者是数组；也可以内联样式v-bind:style=""。
事件处理器：v-on:click="" @click, v-on:keyup @keyup;事件修饰符（.）,按键修饰符

表单：v-model，在表单控件元素上创建双向数据绑定，会根据控件类型自动选取正确的方法来更新元素
    修饰符：
     .lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步，<input v-model.lazy="msg" >
  .number 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）<input v-model.number="age" type="number">
  .trim 自动过滤用户输入的首尾空格，<input v-model.trim="msg">