重学 vue 教程

0 引言

从上次重学python 依赖，忽然很想感觉有些许的沉淀，所以重学vue 吧，还是 不要那么懒了

1 结构

• template 放置 html
• script 放置 js
• style 放置css

2 路由节点

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

var router =  new VueRouter({
    routes
})

3 模版

所谓模版，一句话 通过 插值 指令控制 template 生成html

• 插值

    <p>{{aboutMsg}}</p>
    <p v-if="seen">v-if 看到是否能看见</p>
    <span v-once>这个将不会改变: {{oncemsg}}</span>
    <p>
      Using v-html directive:
      <span v-html="rawHtml"></span>
    </p>
    <!-- 绑定一个 attribute -->
    <img v-bind:src="imageSrc" />
    <div :text="getText()">function-bind</div>
    <div :text="myText">computed-bind</div>
    <button v-bind:disabled="buttonDisabled">button 不能点击了</button>
    <!-- <button v-bind:disabled="isButtonDisabled">Button</button> -->
    <p>
      {{ number + 1 }}
      <!--  只能执行表达式 -->
      <!--  {{ ok ? 'YES' : 'NO' }} 
      {{ message.split('').reverse().join('') }}--> 
      <!-- <div v-bind:id="'list-' + id"></div> -->
    </p>

• 指令

<p v-if="seen">现在你看到我了</p> 

• 参数

一句话 可变模版的属性变量化

    <a v-bind:href="url">参数绑定url</a> 
    <a v-on:click="alert_func">参数监听事件</a> 
    
  url: "https://cn.vuejs.org/v2/guide/syntax.html",
  alert_func() {
      alert("this is alert");
    },

<!--  动态参数  自动转换为小写--> 
  <a v-bind:[attributeName]="url">绑定属性</a>
    <br />
    <a v-on:[eventName]="doSomething">绑定事件</a>

• 缩写

v-bind:XX
:XX
v-on:XX
@XX 

4 render

• 条件渲染

    if else for  
v-if 是否渲染 v-show 是否显示
<div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" />
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" />
    </template>

    <div v-show="on">
      <!--修改的disable 属性 -->
      <p>can you see me</p>
    </div>
    <ul>
      <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>