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>