学习Vue.js中，官网提供了Vue.js的各种安装方式，这里就不赘述了。以下，继续钻研中~
声明式渲染
- <div id="app">
- <span style="color:#409EFF;">{{ message }}</span>
- </div>
- <script>
- <script>
- var app = new Vue({
- el: '#app',
- data: {
- message: 'Hello Vue!'
- }
- })
- </script>
{{ message }}
动态更新加载时间
- <div id="app-2">
- <span style="color:#409EFF;" v-bind:title="message">
- 鼠标悬停几秒钟查看此处动态绑定的提示信息！
- </span>
- </div>
- <script>
- var app2 = new Vue({
- el: '#app-2',
- data: {
- message: '页面加载于 ' + new Date().toLocaleString()
- }
- })
- </script>
鼠标悬停几秒钟查看此处动态绑定的提示信息！
控制元素是否显示(true-显示|false-隐藏)
- <div id="app-3">
- <p style="color:#409EFF;" v-if="seen">现在你看到我了</p>
- </div>
- <script>
- var app3 = new Vue({
- el: '#app-3',
- data: {
- seen: true
- }
- })
- </script>
现在你看到我了
渲染一个列表
- <div id="app-4">
- <ol>
- <li style="color:#409EFF;" v-for="todo in todos">
- {{ todo.text }}
- </li>
- </ol>
- </div>
- <script>
- var app4 = new Vue({
- el: '#app-4',
- data: {
- todos: [
- { text: '学习 JavaScript' },
- { text: '学习 Vue' },
- { text: '拥抱开源！' }
- ]
- }
- })
- </script>
- {{ todo.text }}
逆转消息
- <div id="app-5">
- <p>{{ message }}</p>
- <el-button type="primary" v-on:click="reverseMessage">逆转消息</button>
- </div>
- <script>
- var app5 = new Vue({
- el: '#app-5',
- data: {
- message: '蒲公英博客!'
- },
- methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('')
- }
- }
- })
- </script>
{{ message }}
动态绑定输出内容
- <div id="app-6">
- <p style="color:#409EFF;">{{ message }}</p>
- <input v-model="message">
- </div>
- <script>
- var app6 = new Vue({
- el: '#app-6',
- data: {
- message: 'Hello Vue!'
- }
- })
- </script>
{{ message }}
完。
微信小程序
互联网开发，终身学习者，欢迎您的关注！
